"어느새 50일이..."
Section 1 의 마지막에서 4일 남짓, 주말을 포함하면 대략 6일 정도를 리액트를 배우는데 사용했었습니다. Section 2에 들어와서 다시 리액트를 만나게 되었네요. 오늘은 state 끌어올리기 에 관해서 정리하려고 합니다.
props
리액트에는 props 와 state 라는 개념이 있습니다. (소문자로 쓴 것에 주의해주세요. 리액트에서 대문자로 시작하는 것은 컴포넌트입니다.)
리액트 공식 문서는 컴포넌트가 자바스크립트의 함수처럼 임의의 입력을 받을 수 있는데, 이 입력을 props (properties) 라고 정의하고 있습니다. 어떤 컴포넌트가 attributes 와 children 을 가질 때, 그것들이 컴포넌트에 단일한 객체로 전달이 된다는 것이고, 이것을 props 라고 한다는 것이죠.
React 기술 용어 모음도 유용한 정보를 제공하고 있습니다. props 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터이며, 읽기 전용이라는 것입니다. 자바스크립트로 표현하자면 이미 string 이나 number 로 할당된 const 상수라고 볼 수 있겠습니다. props.number = 42; 와 같은 적용을 하면 안 된다는 것이죠.
state
state 는 비교하자면 props 와 반대 개념이라고도 할 수 있습니다. props 를 어떤 방식으로든 수정해서는 안 된다면, state 는 컴포넌트와 관련된 일부 데이터가 시간에 따라 변경될 경우 사용하는 것이기 때문입니다. 또 props 는 부모 컴포넌트로부터 전달받지만, state 는 컴포넌트에서 관리된다는 차이가 있습니다.
그래서 만약 서로 다른 두 컴포넌트가 같은 state 를 가져야 한다면, 두 컴포넌트의 공통이 되는 조상 컴포넌트를 찾아 state 를 배치하고, 해당되는 데이터들을 props 로 두 컴포넌트에 전달해야 합니다.
state 끌어올리기
state 의 마지막 문단이 바로 state 끌어올리기 입니다. 서로 다른 두 컴포넌트가 같은 state 를 가져야 할 때, 공통의 조상 컴포넌트를 찾아 state 를 배치하는 것을 state 끌어올리기 (lifting state up) 이라고 하는 것이죠.
공통되는 조상 컴포넌트에 state 를 배치하고 하위에는 props 로 값을 전달하는 것을 통해, 서로 다른 두 컴포넌트는 일관된 값을 유지할 수 있게 됩니다.
만약 하위 컴포넌트에서 발생하는 어떤 이벤트로 state 가 바뀌어야 한다면 어떻게 해야 할까요? 리액트는 state 를 변경하는 함수를 하위 컴포넌트에 전달하여, 이 함수를 하위 컴포넌트가 실행하게 하는 것으로 이런 문제를 해결합니다.
어떤 변수를 closure 로 가두어 접근하는 것과도 유사해 보이는데요. closure 를 활용할 때 closure 의 외부 함수가 리턴하는 객체는 각각의 closure 변수를 가지고 독립적으로 구성된다면, state 는 공통 조상 컴포넌트의 state 값이 일관되게 하위 컴포넌트로 전달된다는 차이점이 있겠습니다. (이 부분은 공부하면서 개인적으로 느낀 바이니 깊게 받아들이실 필요는 없습니다.)
어느새 TIL 을 작성하게 된지 50일이 지났습니다. 코드스테이츠에서 본격적으로 공부를 시작한지 벌써 50일이 지났다는 말이네요. 새삼스럽기도 하지만 갈 길을 생각하니 안주해선 안 되겠다 싶은 마음이 듭니다. 코드스테이츠 수료를 알리는 날이 올 때까지 더욱 최선을 다해보겠습니다.
