실습 강의 미니프로젝트 const {} = props ;

안녕하세요, 소플입니다.

해당 코드는 props가 객체로 전달이 되며, props 객체로부터 각 property들을 구조 분해 할당(Destructuring Assignment)을 사용해서 가져올 수 있다는 것을 보여주기 위해 작성한 것입니다.

입문자분들이 코드의 구조를 빠르게 익힐 수 있도록 하기 위해 넣어둔 코드라고 보면 됩니다.

지금 코드에서는 실제로 props에 아무 것도 없기 때문에 비워두었지만,
나중에는 아래와 같은 형태로 각 property를 변수로 가져올 수 있습니다.

function MyComponent(props) {
    const { property1, property2 } = props;

    return (
        <div>
            <p>{property1}</p>
            <p>{property2}</p>
        </div>
    );
}

export default MyComponent;

function MyComponent({ property1, property2 }) {
    return (
        <div>
            <p>{property1}</p>
            <p>{property2}</p>
        </div>
    );
}

export default MyComponent;

JavaScript의 구조 분해 할당에 대한 더 자세한 설명은 아래 링크를 참고하시기 바랍니다!

https://www.frontoverflow.com/question/22/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98%20%EA%B5%AC%EC%A1%B0%20%EB%B6%84%ED%95%B4%20%ED%95%A0%EB%8B%B9(Destructuring%20Assignment)#21

감사합니다.