정말 화가나는 예비군훈련을 마치고
다시 현생으로 돌아오자마자 마주친건 state끌어올리기....
생전 처음들어보았다.
그래서 이게 뭔지 알아보기위해 포스팅을 하려고한다.
👉🏻 상태 끌어올리기
처음엔 이게 뭘까.. 가만히 생각해보다가
멱살 끌어올리기밖에 생각이안나서 여기저기 찾아보았다.
상태 끌어올리기란 ??
단방향 데이터 흐름이라는 원칙에 따라,
하위 컴포넌트는 상위 컴포넌트로부터 전달받은
데이터의 타입이 무엇인지만 알 수 있다.
또한 데이터가 state로부터 왔는지,
하드코딩을 통해 입력된 내용인지도 모른다.
따라서, 하위 컴포넌트에서의 어떤 이벤트로 인해
상위 컴포넌트의 상태가 바뀌는 것은 마치 "역방향 데이터 흐름"
처럼 느껴질 수 도 있다.
결국 상위 컴포넌트의 "상태를 변경하는 함수" 그자체를
하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하게 만드는 것이다.
콜백함수를 보면,
위와 같이,
상태를 변경하는 함수를 하위 컴포넌트로 전달하는것은
콜백함수를 고차함수로 전달하는 것과 일맥상통한다고 볼 수 있다.
상태 끌어올리기 예제
그럼 부모 컴포넌트로 state를 어떻게 끌어올릴 수 있을까??
다음 예제를 보면서 살펴보자!!
아래의 코드는 부모컴포넌트(App),
자식컴포넌트(Counter)가 있다.
Counter는 버튼을 누를때마다 count가 1씩 증가하는 역할을 함.
위와 같이 버튼을 클릭했을 때 count가 1씩 증가하게 된다.
하지만 여기서 App컴포넌트에서 두개의 Counter 컴포넌트의
count를 합친 total count를 표시해주고싶다 하면
어떻게해야할까...!?? 이때 상태 끌어올리기를 사용하는 것이다.
그럼 방법을 먼저 살펴보자!!
- 부모 컴포넌트인 App에서 사용할 state인
count를 useState를 이용해 설정을 해준다. - 부모 컴포넌트의 state를 증가시키는 함수인
handleClick 함수를 정의해준다. - 자식 컴포넌트 Counter에 props로
부모의 count(state)와
부모의 count를 증가시키는 handleClick함수를 전달한다.
4. 자식 컴포넌트에서 버튼이 클릭되면, 자신의 setCount로 증가시키고,
props로 전달된 onClick 함수도 호출해 부모의 total count를 증가시킴.
이렇게 state와 props, 콜백함수를 이용하여 코드를 작성하면
각자 Counter 컴포넌트의 count를 가지면서, 부모인 App 컴포넌트의
total count를 증가시키므로 부모에서 자식 컴포넌트의 상태를 끌어올릴 수 있다.
state와 props를 이용하여 끌어올리기를 이용하면
부모로부터 전달받은 함수로 부모의 state를 변경할 수 있다.
마지막으로, 단계로 정리해서 알아보자면!!
- 부모 컴포넌트에 state를 선언하고
- 함수를 통해 state를 변경할 수 있는 함수를 선언
- state와 함수를 자식 컴포넌트에게 전달
- props로 전달받은 자식은 함수를 실행하여 상태값을 변경
- 자식 컴포넌트에서 부모 컴포넌트의 상태값 제어
위의 상황을 props를 이용해 state를 끌어올린다고 말하는 것이다.
상태변경함수를 부모컴포넌트에서 자식컴포넌트로 넘겨주는게 너무 어색하다.
연습을 많이 해봐야겠다!!
