Forwording State Component

컴포넌트로 상태 전달

• 부모 요소에서 자식 요소로 상태를 전달할 수 있음
• 자식 요소의 속성으로 전달

1. 방법 count, setCount 2개 활용

• Parents

import { count } from 'console';
import React, { useState } from 'react'

export default function ForwordingStateComponent() {
	const [count, setCount] = useState<number>(0);
	const onIncrease = () =>{
		setCount(count + 1);
	}

	return (
		<div>
			<Child1 count={count} />
			<Child2 />
			<Child3 count={count} setCount={setCount}/>
		</div>
	)
}

• Interface

interface Child1Props{
	count: number;
}

interface Child3Props{
	count: number;
	setCount: React.Dispatch<React.SetStateAction<number>>
}

• Child

function Child1({count}:Child1Props){
	return (
	<div style={{height: '200px', backgroundColor:'#FFA7A7'}}>
		<h1>{count}</h1>
	</div>
	)
}

function Child2(){
	return (
		<div style={{height: '200px', backgroundColor:'#FAEF7D'}}></div>
	)
}

function Child3({count, setCount}: Child3Props){
	const onIncrease = () =>{
		setCount(count+1); //위에 에서 count 값을 받아와서 setCount 실행
	}
	return (
		<div style={{height: '200px', backgroundColor:'#B7F0B1'}}>
			{/* <div>{count}</div> */}
			<button style={{width:'50px', height:'50px'}}
			onClick={onIncrease}>+</button>
		</div>
	)
}

2. 방법 setCount 사용

• Parents

import { count } from 'console';
import React, { useState } from 'react'

export default function ForwordingStateComponent() {
	const [count, setCount] = useState<number>(0);

	return (
		<div>
			<Child1 count={count} />
			<Child2 />
			<Child3 osetCount={setCount}/>
		</div>
	)
}

• Interface

interface Child1Props{
	count: number;
}

interface Child3Props{
	setCount: React.Dispatch<React.SetStateAction<number>>
}

• Child

function Child1({count}:Child1Props){
	return (
	<div style={{height: '200px', backgroundColor:'#FFA7A7'}}>
		<h1>{count}</h1>
	</div>
	)
}

function Child2(){
	return (
		<div style={{height: '200px', backgroundColor:'#FAEF7D'}}></div>
	)
}

function Child3({setCount}: Child3Props){
	const onIncrease = () =>{
		setCount((count)=> count+1);
	} //callback 함수를 통해서 호출
	return (
		<div style={{height: '200px', backgroundColor:'#B7F0B1'}}>
			<button style={{width:'50px', height:'50px'}}
			onClick={onIncrease}>+</button>
		</div>
	)
}

3. 방법 부모 함수에 onIncrease 생성 후 자식에서 호출

• Parents

import { count } from 'console';
import React, { useState } from 'react'

export default function ForwordingStateComponent() {
	const [count, setCount] = useState<number>(0);
	const onIncrease = () =>{
		setCount(count + 1);
	} //부모함수에서 onIncrease 생성

	return (
		<div>
			<Child1 count={count} />
			<Child2 />
			<Child3 onIncrease={onIncrease}/>
		</div>
	)
}

• Interface

interface Child1Props{
	count: number;
}

interface Child3Props{
	onIncrease: () => void;  //전달
}

• Child

function Child1({count}:Child1Props){
	return (
	<div style={{height: '200px', backgroundColor:'#FFA7A7'}}>
		<h1>{count}</h1>
	</div>
	)
}

function Child2(){
	return (
		<div style={{height: '200px', backgroundColor:'#FAEF7D'}}></div>
	)
}

function Child3({onIncrease}: Child3Props){
	return (
		<div style={{height: '200px', backgroundColor:'#B7F0B1'}}>
			{/* <div>{count}</div> */}
			<button style={{width:'50px', height:'50px'}}
			onClick={onIncrease}>+</button>
		</div>
	)
}

⚠️ 문제점

• 자식 컴포넌트에서 상태를 변경하면 부모 컴포넌트가 리렌더링됨
• 부모컴포넌트의 자식 컴포넌트 중 해당 상태를 사용하지 않는 컴포넌트까지 리렌더링됨
• 코드의 복잡성 (컴포넌트의 속성 복잡성)이 증가
• 이 문제를 해결하기 위해 글로벌 상태로 관리하는 방법이 파생됨

⚠️ 해결법

• 글로벌 상태 관리 기법으로 context, Redux, zustand라는 기법이 존재