[React] 리액트의 핵심 2, Props

Props란?

---

React의 컴포넌트간에 변수, 함수 등의 정보를 물려줄 수 있는 방법이다.

 

import BoardWriteUI from './BoardWrite.presenter'

export default function BoardWrite(){
    const [writer, setWriter] = useState()

    const handleChangeWriter = (event) -> {
        const writer = event.target.value
        setWriter(writer)
    }

    return(
        <BoardWriteUI handleChangeWriter={handleChangeWriter}>
    )
}

BoardWriteUI 라는 컴포넌트를 import 하면서, 자식 컴포넌트에 전달할 props value를 지정해서 넘겨줄 수 있다.

자식 컴포넌트에서는 아래와 같은 방식으로 props에 저장된 함수를 넘겨받아 쓸 수 있다.

props = { hamdleChagngeWriter: hamdleChagngeWriter }
// 이런 객체의 형태로 함수가 전달된다.

export default function BoardWriteUI(props){
    return(
        <Wrapper>
            <Writer type="text"
            Placeholder="이름을 입력해주세요."
            onChange={props.onChangeWriter}
            >
        </Wrapper>
    )
}
// 자식 컴포넌트에서는 이런 식으로 받아올 수 있다.

 

주의!
리액트는 데이터의 흐름이 단방향으로 이루어지기 때문에 부모 > 자식 방향으로만 Props를 전달할 수 있다. 그 반대는 불가능하다.

 

Emotion에서는

---

Emotion에서 Props를 불러오려면, props를 입력할 공간이 없으므로 해당 위치에 화살표 함수를 별도 선언 해주어야 한다. 하단의 코드를 참고하자.

 

 

props를 잘 활용하면 이런식으로 정보를 넘기고 또 넘기는 것도 가능하다.