예를 들어 컴포넌트 내부에 let 키워드를 사용하여 변수를 선언했을 때 다음 렌더링이 될 때 변수 값이 초기화 된다. 만약 유지하는 값을 관리하려면 useState를 사용해야 하는데, useState는 상태를 바꾸게 되면 컴포넌트가 리 랜더링 된다. 하지만, 가끔 어떤 값을 바꿨을 때 굳이 리렌더링 할 필요 없는 값을 관리하는 경우도 있다. 이럴 때 useRef를 사용하면 된다. useRef는 특정 DOM을 선택해야할 때 사용하는데 이것 외에도 컴포넌트가 리 렌더링 될 때마다 계속 기억 되는 값을 관리할 때도 사용할 수 있다. 주로 setTimeout, setInterval을 사용했을 때 주어지는 ID값을 기억해야 할 때 사용하고 외부 라이브러리를 사용하여 생성된 인스턴스를 담을 때도 사용하고, 스크롤 ..

HTML/Javascript 환경에서는 특정 DOM을 선택할 때 getElementbyid나 query selector를 사용한다. react를 사용할 때 특정 엘리먼트의 위치나 크기를 가져와야 한다 든지, 스크롤바 위치를 가져오거나 설정해야 한다 든지, 포커스를 설정해야 된다 든지 등 다양한 상황이 있다. 추가적으로 video.js 라이브러리나, d3, chart.js 등 그래픽 라이브러리를 사용할 때에도 특정 DOM에 라이브러리를 적용하기 때문에 DOM을 선택하는 상황이 발생할 수 있다. 이 때 react에서 ref라는 것을 사용한다. 함수형 컴포넌트에서는 useRef를 사용하고 클래스형 컴포넌트에서는 React.createRef()를 사용한다. 우선 이번 챕터에서는 함수형 컴포넌트인 useRef를 ..

이전 포스트인 input 상태 관리하기의 응용 name 식별자를 사용하여 여러 개의 input 박스의 상태를 관리하는 예이다. 이번 챕터에서 가장 중요한 것은 객체 상태를 업데이트 하는 것인데, 리액트에서 객체를 업데이트 할 때는 반드시 기존 객체를 먼저 복사해야 한다. 먼저 InputSample.js 파일을 생성한다. import React, {useState} from 'react'; function InputSample() { // 객체 형태의 상태를 관리 const [inputs, setInputs] = useState({ name : '', nickname: '' }) // 네임과 닉네임 값을 간편하게 사용하기 위해 name, nickname 값을 비구조화 할당으로 추출 const {name, ..

React에서 input 창에 간단한 텍스트 입력 및 초기화에 대한 소스 예시 먼저 InputSample.js 파일을 생성하고 아래 소스를 적용한다. function InputSample() { const [text, setText] = useState(''); // 하단 input 박스에서 값 변경 시 이벤트 객체가 파라미터(e)에 담겨서 온다. const onChange = (e) => { // e.target에는 이벤트가 발생한 input DOM에 대한 정보를 가지고 있다. console.log(e.target); // 이벤트가 발생한 DOM의 값 가져오기 console.log(e.target.value); setText(e.target.value); } // 초기화 const onReset = (..

useState는 React의 hooks 중 하나로 해당 예시는 UseSate를 활용하여 간단한 Counter 프로그램 만들기다. 먼저 Counter.js 파일을 생성 후 아래와 같이 소스를 작성한다. import React, {useState} from 'react'; // useState 함수 사용 function Counter() { const [number, setNumber] = useState(0); // COunter 컴포넌트 내부에 함수 작성 const onIncrease = () => { // 숫자 증가 setNumber(number + 1); } const onDecrease = () => { // 숫자 감소 setNumber(number - 1); } return ( {number} ..

조건부 렌더링(rendering)이란? 특정 조건이 참인지 거짓인지에 따라 다른 결과를 보여주는 것 먼저 App.js의 Hello 태그 안에 isSpecial을 작성한다. import React from 'react'; import Hello from './Hello'; // 현재 자신의 디렉토리에 있는 Hello 컴포넌트를 불러옴 import Wrapper from './Wrapper'; function App() { return ( {/* true 또한 Javascript 값이기 때문에 중괄호로 감싸야 한다 */} ); } export default App; Hello.js 컴포넌트로 이동하여 아래 소스를 작성한다. 해당 소스는 삼항연산자를 활용하여 isSpecial 값의 true/false 에 따라..

props는 properties의 줄임말이다. props는 컴포넌트를 사용하려 할 때 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용한다. App.js import React from 'react'; import Hello from './Hello'; // 현재 자신의 디렉토리에 있는 Hello 컴포넌트를 불러옴 function App() { return ( ); } export default App; 위와 같이 작성 후 Hello.js로 이동 import React from 'react'; // 리액트를 불러와서 사용하겠다. // 함수 형태 컴포넌트 // 함수형태 컴포넌트의 첫 자리는 대문자 권장 // props 파라미터 안에는 App.js에서 넣어준 값이 객체 형태로 존재 function Hello(..

JSX란 React에서 컴포넌트의 생김새를 정의할 때 사용하는 문법이다. 보기에는 HTML처럼 생겼지만 실제로는 Javascript다. 바벨이라는 도구를 사용하여 XML 형태의 코드가 Javascript로 변환이 된다. 변환되는 것을 확인하기 위하여 babeljs.io에 접속하여 아래 코드를 입력해 본다. 위 이미지의 네모 안의 createElement 함수가 컴포넌트를 만들어준다. 즉 컴포넌트를 우측 방식대로 계속 선언하는 것은 어려움이 있으니 JSX를 문법을 사용하여 XML형태로 사용하면 이것을 Javscript 형태로 변환하게끔 해주는 것이 바벨이라는 도구다. JSX 문법을 정확하게 Javascript 문법으로 변환하기 위해서는 지켜야 할 규칙들이 있다. 태그는 무조건 닫혀야 된다. (닫히는 태그가..