[React] 상태 끌어올리기(state lifting)

✔️ 시작

React를 하면서 상태 끌어올리기가 이해가 잘 가지 않아 이번 기회를 통해 이해해 보려고 한다.

---

상태 끌어올리기를 알기 전에 Props, useState에 대해 알고 가야한다.

📍 Props, useState

Props

• 변하지 않는 외부(부모)로 부터 전달 받은 값
• props를 함수의 전달인자 처럼 전달 받아 이를 기반으로 화면에 어떻게 표시 되는지 기술하는 React 엘리먼트를 반환(객체 형태로 반환) 한다.
• 부모 컴포넌트(상위 컴포넌트)로 부터 전달 받은 것으로 읽기 전용이다. (수정x)
  - 외부로 부터 전달 받아 변하지 않는 값으로 함부로 변경될 수 없는 읽기 전용이다.(read-only)

props 사용법

1. 하위 컴포넌트(자식 컴포넌트)에 전달하려는 값(data)과 속성을 정의한다. (이름 등은 코드 상황에 맞게 작성)
2. props를 사용해 정의된 값과 속성을 전달한다. (함수의 인자처럼 자식 컴포넌트 인자로 전달)
3. 전달 받은 props를 렌더링 한다.

function Parent(){
	return(
    	<div className="parent">
      		<Child>I'm Child</Child>
      	</div>
    )
}

// props를 자식 컴포넌트에 인자로 전달
// props는 객체 형식으로 작성할 수 있다.
function Child(props){
	return(
    	<div className="child">
      		<p>{props.children}</p>
      	</div>
    )
}

useState

state(상태)?

• 컴포넌트 내부에서 변할 수 있는 값 (변수와 비슷하나 다르다.)
• state 사용 시 웹이 App처럼 동작할 수 있다.
• 변경될 경우 HTML이 자동으로 재렌더링 된다.(새로고침 x)
  state 번수는 React에 의해 함수가 끝나도 사라지지 않는다.

state hook, useState

• useState를 사용해 state를 관리한다.
• useState 사용하려면 불러와야한다. (import)

import { userState } from "react"

기본 적인 문법

const [state에 저장할 변수, 현재 state를 갱신할 변수] = useState(state초기 값 할당)

const [count, setCount] = useState(0)
// count는 useState(0)으로 설정해 줘 0이 초기 값으로 들어간다. (구조 분해 할당)
// setCount라는 함수를 이용해 count의 값을 변경해 줄 수 있다.

구조분해 할당으로 전달한다.

• useState를 호출하면 배열을 반환한다.
  - 배열의 0번째 요소 : 현재 state 변수 값
  - 배열의 1번째 요소 : 해당 변수를 갱신할 수 있는 함수
  - useState의 인자 : state의 초기값 (배열 0번째 값에 전달 된다.)
• 변수 대신 쓰는 데이터 저장 공간을 만든다.(array, objec인 경우 - 원본 훼손x)
• useSate()를 이용해 만든다.
• string, number, array, object 등 저장 가능

📍 상태 끌어올리기(state lifting)

상위 컴포넌트에서 하위 컴포넌트로 props를 통해 전달되는 상태 데이터라고 정의 되어 있다.

초반에 보면 이게 무슨 말이지? 하는데 점점 이해 하다 보면 이렇게 간결하게 설명할 수가..! 라고 생각 했다.

만약 자식 컴포넌트에서 발생하는 이벤트나 상태 데이터 변경사항이 있어
부모 컴포넌트에서 처리해야할 때 상태 끌어올리기를 사용한다.

내가 이해하려고 그려본 그림이다.

부모 컴포넌트와 자식 컴포넌트 데이터를 주고 받을 때 props를 사용한다.
부모 컴포넌트에 state(상태) 데이터를 만들고 해당 데이터를 props를 통해 자식 컴포넌트에 전달해 준다.

❗️ 유의사항

• 공통으로 사용하는 상태만 끌어 올리는게 좋다.
• props는 읽기 전용으로 자식 컴포넌트에서 전달받은 데이터를 변경할 수 없다.
• 상태 데이터를 다른 컴포넌트에서도 사용할 경우 최상위 컴포넌트에 배치하는 게 좋다.

상태 끌어올리기를 할 경우 공통으로 사용하는 상태를 하나로 관리하기 때문에 데이터 중봅 사용을 예방할 수 있다. 이때 문에 데이터를 효율적으로 관리할 수 있는 장점을 가지고 있다.

// useState 불러오기
import React, { useState } from 'react';

/*
* [부모 컴포넌트]
* (state)상태 데이터 최상위에 선언하기
*/
function ParentComponent(){
	const [count, setCount] = useState(0);
	
	function sumCount(){
      	// count에 1더하기
		setCount(count + 1)
	};

/*
* 자식 컴포넌트에 전달하려는 값(data)과 속성 정의
* count={count} onBtnClick={sumCount}
*/
	return(
		<div>
			<p>Parentcount: {count}</p>
			<ChildComponent count={count} onBtnClick={sumCount} />
		</div>	
	)
}

/*
* [자식 컴포넌트]
* props로 count, sumCount 자식 컴포넌트에 전달
* props는 읽기 전용으로 자식 컴포넌트에서 수정 할 수 없다.
*/
function ChildComponent(props){
	return(
		<p>Childcount: {props.count}</p>
		<button onClick={props.onBtnClick}>count btn</button>
	)
}

1. ChildComponent 에서 <button> 클릭 시 onBtnClick이 호출된다.
2. onBtnClick은 sumCount를 호출한다.
3. sumCount함수는 count상태를 변경한다. (count + 1)
4. 변경된 count(count + 1)를 ParentComponent에 전달한다.

이해하려고 그려본 그림이다.
이를 보면 알 수 있듯이 위에서 아래로, 아래에서 위로 그래서 상태 끌어올리기라는 뜻을 붙인 거 같다.

상태 끌어올리기를 좀 더 잘 활용하려면

"React로 사고하기"으로 진행"

목업으로 시작하기 ➡︎ 디자이너한테 시안 받기

1. UI를 컴포넌트 계층 구조로 나누기 ➡︎ 와이어 프레임
2. React로 정적인 버전 만들기 ➡︎ state 사용하지 않기
3. UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기 ➡︎ 많은 초보자가 어려워 하는 영역
4. State가 어디에 있어야 할 지 찾기
5. 역방향 데이터 흐름 추가하기

🔗 React로 사고하기 공식
https://ko.reactjs.org/docs/thinking-in-react.html

• React로 코드를 작성할 때 무작정 작성하기 보단
  React로 사고하기 방식 처럼 진행해 어떤 부분에 상태 끌어올리기를 사용해야하는지 알 수 있다.

---

✏️ 마치며

상태 끌어 올리기에 대해 이번에 제대로 알아 본 거 같다.
이렇게 한 영역만 봤을 땐 이해가 가지마 여러 코드에 섞여서 볼때는 이게 상태 끌어올리기인가? 등 헤메곤 한다.

이론을 아는 것도 중요하지만 실제 코드를 작성하면서
어떤 상황에 상태 끌어올리기를 해야하는지 판단 후
작성해 보는 연습을 해봐야 겠다.

출처
React 공시
chat GTP
이전에 작성한 내 게시글(코드스테이츠 관련 학습)