[TIL] React children

공지애·2022년 4월 1일
0

강의 중 갑자기 만난 이 녀석...🤔🙄

const Grid = (props) => {
    const {is_flex, width, margin, padding, bg, children} = props;

    const styles = {
        is_flex: is_flex,
        width: width,
        padding: padding,
        margin: margin,
        bg: bg
    }
    return (
        <React.Fragment>
            <GridBox {...styles}>{children}</GridBox>
        </React.Fragment>
    )
}

children은 태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 props를 말한다. 위의 코드의 경우, 다른 컴포넌트에서 GridBox를 부르는 태그 안의 내용이 children에 삽입된다. GridBox라는 레이아웃을 만들고 이를 여러 컴포넌트에서 재사용할 때, 그 안의 content만 바꾸어서 출력해줄 수 있도록 하는 것이다.

0개의 댓글