Weekly TIL - Day 4

⭐️ Today's summary

 

오늘은 React의 styled-components와 props에 대해서 자세하게 다루어 보았다.

 

기존에 React를 경험 해봤기 때문에 styled-components에 대해서는

 

큰 어려움이 없었지만 props에 대한 내용이 헷갈려서 오늘은 props에 대해서 정리하겠다.

 

⭐️ Problem

 

props란 부모가 자식한테 넘겨주는 "객체"를 의미한다.

 

이때 props에는 두가지로 넘겨주는 방법이 존재한다.

 

[ props 예시 코드 ]

<Heading type="h2" />
<Heading type="hello" />
<Heading>무엇을 도와드릴까요?</Heading>

 

이때 나는 태그안에 있는 값과 태그 밖에 있는 값의 차이를 잘 몰랐었다.

 

두가지에 대해 정리해 보겠다.

 

⭐️ Try

 

[ props 사용 예시 ]

import React from 'react';

const Heading = ({ type, children }) => {
    // const { type, children } = props; -> 구조 분해 할당으로 가능

    if (type === 'h2') {
        return (
            <>
                <h2>안녕하세요. Props입니다.</h2>
            </>
        );
    } else {
        return (
            <>
                <h1>안녕하세요. Props입니다.</h1>
                <h2>{children}</h2>
            </>
        );
    }
};

export default Heading;

 

 

우선 Problem에 작성한 props 예시 코드가 동작을하여 props 사용 예시 코드에 넘어오게 된다.

 

이 말이 무엇이냐,

 

props는 부모 -> 자식으로 넘겨주는 객체이기 때문에 App 컴포넌트가 최상위 부모이기 때문에

 

App 컴포넌트에서 Heading에 값을 태그안, 태그밖에 넘겨주는 형태로 작성 되있다.

 

이 둘의 차이는 태그 안에 있으면 통상 자식 클래스의 매개변수에 props, 

 

태그 밖에 있다면 통상 children으로 사용한다.

 

원래 형태는 const Heading = (props) =>{

}

 

형태로 받아서 props.type, props.children 이렇게 받는데,

 

Js의 객체 구조분해 할당 방식으로

 

const Heading = ({type, children}){

}

 

형태로 받을 수 있게 된다.

 

이 두 차이와 props 가 어떻게 넘어가고, 사용은 어떻게 하는지 잘 알게 되었다.