[React] Lifting State Up

Lifting State Up

: State를 상위 Component에서 관리하는 기법

---

Shared State

: 부모 component의 state를 자식 components가 공유하여 사용하는 것

---

Lifting State Up 사용법

1) 자식 Component에서 state를 관리하여 사용하는 기존 방식

// JSX
function Double(props){
  	const [ num, setNum ] = useState(0);

	return (
    	<p>입력한 수에 2를 곱한 값은 {num * 2}입니다.</p>
    )
}

• 해당 컴포넌트에서 setNum를 해주는 입력로직이 있어야합니다.

2) Lifting State Up

부모 component는 입력에 따른 setNum를 구현하고 자식 component에 num값을 넘겨줍니다.

// JSX
function Calcul(props){
	const [ num, setNum ] = useState();

  	return (
    	<Double InputNum={num} />
      	<Triple InputNum={num} />
    )
}

자식 componet는 props에서 값을 받아와 연산을 합니다.

// JSX
function Double(props){
	return (
    	<p>입력한 수에 2를 곱한 값은 {props.InputNum * 2}입니다.</p>
    )
}

// JSX
function Triple(props){
	return (
    	<p>입력한 수에 3을 곱한 값은 {props.InputNum * 3}입니다.</p>
    )
}

• component를 각 용도에 맞게 분할할 수 있어 관리가 용이해지고 재사용성이 향상됩니다.