1. State Part 1
'State'란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. 'State'가 일반적으로 '상태'라는 뜻으로 사용되는 단어라는 점으로 미루어 볼 때, 'State'는 컴포넌트 내부의 동적 데이터를 지칭하는 개념이라는 것을 짐작할 수 있다.
'State'를 사용할 때에는 'useState'라는 것을 사용한다. 'useState'는 'State'를 만들기 위해서 React에서 제공하는 기능이다. React에서만 제공하기에, React에서만 존재하는 개념이자 기능이다. 이러한 기능을 앞으로는 'Hook'이라 칭하기로 했다. 따라서 'useState'는 'Hook'이다.
useState를 사용하는 방법은 다음과 같다.
"const [value, setValue] = useState(초기값)"이 useState를 통해 State를 생성하는 코드이다.
빈 배열에 첫번째 자리에는 State의 이름이 들어간다. 두번째 자리에는 set과 함께 State의 이름이 들어간다. 마지막으로 useState 괄호 안의 인자에는 초기값을 넣어주게 되는데, 이 초기값을 'initial State'라고 부른다.
두번째 배열에 들어가는 'State'는 'State'를 변경할 때 사용하는 함수이다. 이 함수를 통해서만 'State'를 변경할 수 있다.
2. State Part 2
'useState'를 두 가지 실용적인 사례로 공부해봤다.
2-(1). Button과 이벤트 핸들러 구현하기
Button을 만들고 그것을 클릭했을 때 state를 변경하는 것을 만들어봤다.
우선 Button 태그를 이용하여 버튼을 생성한다. 이후 'onClickHandler'라는 함수를 만들고 'onClick={}'에 대입해주었다. React에서는 이러한 방식으로 함수와 컴포넌트를 연결시킨다. 이러한 함수를 '이벤트 핸들러'라고 표현한다.
추가적으로 console 코드를 작성한 뒤에 구현된 화면에서 버튼을 눌러주면 'hello button'이 콘솔에 찍히는 것을 확인할 수 있다.
2-(2). state 구현하고 이벤트 핸들러와 연결하기
이해X
2-(3). 불변성
이해X
3. 컴포넌트와 렌더링
3-(1). Component
리액트 컴포넌트가 '선언체'라는 것이 도대체 무슨 말인가?... '명령형', '선언형'???
3-(2). 렌더링
리액트에서 '렌더링'이란, 컴포넌트가 현재 'props'와 'state'의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미한다. UI는 음식, 컴포넌트는 주방장, 리액트는 웨이터로 비유하여 렌더링이 일어나는 프로세스를 이해해보면 다음과 같다.
렌더링을 일으키는 것(triggering)은 UI를 주문하고 주방으로 전달하는 것, 렌더링(rendering)한다는 것은 주방에서 컴포넌트가 UI를 만들고 준비하는 것, 렌더링 결과를 실제 DOM에 커밋(commit)한다는 것은 리액트가 준비된 UI를 손님 테이블에 올려놓는 것.
렌더링은 비유를 통해 이정도 이해했다.
4. Counter 만들기
'useState'와 '이벤트 핸들러'를 이용해서 Counter 프로그램을 구현해봤다. '이벤트 핸들러'에 대한 이해가 부족한 것 같다고 느꼈다.
회고
오늘은 상당히 절망적이다. 내용의 절반은 이해했냐고 누군가가 질문하면 '그렇다'고 대답할 자신이 없다 ㅜㅠㅜㅠㅜㅠㅜㅠㅜ
하지만! 농부가 일이 잘 되지 않는다고 매일 해오던 과업을 중단하지 않는 것처럼, 공부가 잘 되지 않는다고 해서 멈출 생각은 없다. 욕심을 버리고 포기하는 것만 면하자는 마인드로 꾸준히 정진할 생각이다. 어차피 앞으로 배울 내용들은 한 번에 이해되지 않는 것들 투성일테니까... 어쨌든 내일도 화이팅...!
