Props와 State

React에서 Props와 State는 데이터와 상태를 다루는 방법입니다.

React의 데이터 흐름은 단방향이라서, props는 부모가 자식에게만 전달할 수 있고 자식이 부모에게 전달할 수는 없습니다.

props로 부모에서 자식에게 데이터를 전달하는 방법은 다음과 같습니다.

부모 컴포넌트

import {useState} from 'react'
import ContainerUI from './react-presenter'

export default function Container() {
    const [data, setData] = useState('')

    const onclickBtn = () => {
        setData('클릭했습니당~')
    }
    
    return <ContainerUI
    	// 데이터이름 = {전달할 데이터의 값(state)}
		// 데이터 이름은 변수명 저장 하듯이 저장 하면되요
        
        data = {data}
        onclickBtn = {onclickBtn}
    />
}

자식 컴포넌트

export default function ContainerUI(props) {

    return (
        <S.Container>
            <div>{props.data}</div>
            <button onClick={props.onclickBtn}>버튼</button>
        </S.Container>
    )
}

props는 객체입니다. props에 담긴 데이터는 props.data처럼 꺼내서 사용합니다.

아래처럼 구조 분해 할당으로 꺼내 쓸 수도 있습니다.

export default function ContainerUI({data , onclickBtn}) {

    return (
        <S.Container>
            <div>{data}</div>
            <button onClick={onclickBtn}>버튼</button>
        </S.Container>
    )
}

Container/Presenter

모든 코드를 한 파일에 작성하면 가독성이 떨어지고, 나중에 다른 사람이 수정하기 어렵습니다. 그래서 파일을 역할별로 나누는 기법이 생겼고, 그중 하나가 Container/Presenter 패턴입니다.

React에서는 Container/Presenter 패턴과 Atomic 패턴이 주로 쓰입니다.

Container

• state 관리
• UI를 작성하지 않음
• 데이터와 데이터를 다루는 함수를 만들어 props로 전달

Presenter

• 사용자가 직접 보고, 조작하는 컴포넌트(UI)
• 기능을 직접 다루지 않고, Container에서 받은 props로 화면을 바꿈

reference

• presentational & container 디자인 패턴