오늘의 공부
리액트 16.8 버전부터 Hook 이 등장했다.
훅을 통해 컴포넌트의 상태 값이나 여러 기능을을 더 쉽게 관리할 수 있게 됐다. 오늘은 State 훅과 Props을 학습했다.
State는 상태를 가리키는 말로 컴포넌트 내부의 상태 값을 쉽게 관리해줄 수 있다.
Props는 Property, 속성으로 상위 컴포넌트에서 하위 컴포넌트로 지정해줄 수 있는 속성이다.
React의 데이터 흐름
리액트는 페이지 단위 개발이 아닌 컴포넌트 단위 개발을 한다. 즉, 페이지에 필요한 컴포넌트를 먼저 개발한다.
이러한 상향식 개발은 테스트가 쉽고, 확장성이 좋다.
개발은 상향식으로 하지만 React에서 데이터는 하향식으로 전달된다.
컴포넌트의 바깥, 사용되는 부모 컴포넌트에서 데이터를 전달한다.
데이터를 전달받은 컴포넌트는 어디에서 데이터를 전달받았는지 알지 못한다.
이를 단방향 데이터 흐름(one-way data flow) 이라고 한다.
리액트에서 데이터를 다룰 때는 부모 컴포넌트에 의존하는 데이터, 상호관계, 데이터의 역할 등을 고려해서 데이터를 위치시켜야 한다.
Props
부모 컴포넌트에서 자식 컴포넌트에 객체 형태의 값을 전달할 수 있다. 이를 Props라 한다.
마치 속성을 부여하는 것과 같이 작성하면 된다.
부모 컴포넌트에서 Child에 속성을 부여하듯 속성과 데이터를 전달했다.
text 속성에 'Props로 전달한 텍스트' 라는 데이터이다.
Child 컴포넌트에서 Props 받은 데이터를 사용하기 위해서 함수의 매개변수를 적듯 사용하면 된다.
State
수를 증감시키는 앱 기능을 만들고자 한다. Counter.js 는 숫자를 출력하고 +, - 버튼을 가지고 있다.
기능을 예상한다면 + 버튼을 누르면 숫자를 증가시키고, - 버튼을 누르면 숫자를 감소시키면 될 것이다.
여기서 유기적으로 변하는 값은 아마 0으로 출력된 저 숫자일 것이다.
Counter.js 를 수정했다. 아까와 다른 점은 useState 라는 것을 import 했다. 그리고 useState를 선언했다.
기존에 JS에서 보던 스타일과는 다른 형태의 코드이다.
[count, setCount] 부터 살펴보자
count는 현재 state (상태) 값이 담긴 변수이다.
setCount는 state 를 갱신시키는 함수이다.
그 뒤에 붙은 useState(0)이 의미하는 것은 초기 값을 0으로 설정한다는 것이다.
[ 현 상태 값, 상태 갱신 함수 ] = useState('초기 값')
이렇게 Counter.js 를 수정했다.
버튼을 눌렀을 때 발생하는 onClick 이벤트를 추가했다. increase 와 decrease 를 살펴보자.
두 함수 모두 setCount 함수를 실행시킨다.
setCount 함수 안의 인자는 count 로 각각 1을 더하고 뺀다.
다음과 같이 잘 작동하게 된다.
유의할 점은 state 값이 바뀌면 컴포넌트를 다시 렌더링한다.
이 state를 갱신 함수를 통해서 변경시키는 것이 아니라,
강제로 변경하게 되면 렌더링이 안되거나 값이 제대로 변경되지 않을 수 있다.
마무리
Props와 State 훅을 학습했다. Props는 외부에서 받은 속성과 값으로 주로 불변하는 (변하지 않는) 값을 전달한다.
state는 컴포넌트 내부에서 관리하는 변하는 값을 관리할 때 사용한다.
