[React] Container/Presenter Pattern

DongEun·2022년 11월 13일

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>
    )
}