소품. 그들은 무엇에 좋은가요?

소품이란 무엇입니까? 그 대답이 당신을 무한한 가능성으로 인도할 것이라는 좋은 질문입니다. 하지만 먼저 몇 가지 기본 사항을 다루어야 합니다...

구성품

React의 주요 개념은 구성 요소입니다. 이를 통해 앱을 개별적이고 재사용 가능하며 관리하기 쉬운 부분으로 분할할 수 있습니다. 구성 요소를 사용하면 앱을 더 작은 청크로 구성할 수 있으므로 디버깅을 더 쉽게 수행할 수 있습니다. 구성 요소는 JavaScript 함수와 유사합니다. 중요한 차이점은 props를 인수로 받아들이고 JavaScript XML(JSX)을 반환한다는 것입니다. JSX는 선언적 스타일의 프로그래밍입니다. 즉, 반환해야 하는 방법이 아니라 반환해야 하는 항목을 설명합니다. React는 Babel을 사용하여 JSX 코드를 해독하여 React가 DOM에 표시할 수 있도록 JSX를 읽을 수 있는 자바스크립트로 컴파일하는 방법을 결정합니다. 함수가 React 구성 요소로 간주되려면 해당 이름이 대문자로 시작해야 하며 JSX를 반환해야 합니다.

부모 구성 요소는 다른 구성 요소를 반환하는 구성 요소이며 반환되는 구성 요소는 자식입니다. 아래 코드에서
Parent라는 구성 요소는 Child라는 다른 구성 요소를 반환합니다.

const Parent = () => {
  return (
    <div>
        <h1>This is the Parent component</h1>
        <Child />
    </div>
  )
}

소품

소품은 React에서 구성 요소를 동적으로 만드는 데 사용됩니다. 상위 구성 요소에서 하위 구성 요소로 정보를 전달할 수 있습니다. 구성 요소는 재사용할 수 있으며 매번 다른 소품을 전달할 수 있습니다.

소품은 부모에서 자식으로 데이터를 전달하거나 공유하는 유일한 방법입니다. 소품은 다양한 형태를 취할 수 있습니다. 문자열, 숫자, 객체, 부울, 함수 등이 될 수 있습니다. 자식 구성 요소는 prop을 함수에 인수로 전달하여 이 데이터에 액세스할 수 있습니다. 아래 코드에서 Child 구성 요소가 comment 및 testComment를 소품으로 전달되는 것을 볼 수 있습니다. 하위 구성 요소는 인수로 함수에 소품을 전달합니다. 이렇게 하면 키-값 쌍을 사용하여 구성 요소를 통해 정보를 전달하고 호출할 수 있습니다.

const Parent = () => {
    const comment1 = 'This is a comment on the first child'
    const test = 'This is an additional comment'
  return (
    <div>
        <h1>This is the Parent component</h1>
        <Child comment={comment1} testComment={test}/>
    </div>
  )
}
const Child = (props) => {
    console.log("props:", props)
  return (
    <div>
        <p style={ {color:"red"} }>This is the Child component</p>
        <ul>
            <li style={ {color:"blue"} }>{props.comment}</li>
            <li style={ {color:"blue"} }>{props.testComment}</li>
        </ul>
    </div>
  )
}

자식 구성 요소에 console.log("props:", props)를 배치하면 자식에 전달된 props 객체를 볼 수 있습니다.



DOM은 구성 요소를 다음과 같이 렌더링합니다.


구성 요소가 얼마나 유연하고 재사용 가능한지 보여주는 다양한 소품을 사용하여 추가 하위 구성 요소를 상위 구성 요소에 추가할 수 있습니다.

const Parent = () => {
    const comment1 = 'This is a comment on the first child'
    const test = 'This is an additional comment'
    const comment2 = 'This is a comment on the second child'
    const comment3 = 'This is a comment on the third child'
  return (
    <div>
        <h1>This is the Parent component</h1>
        <Child comment={comment1} testComment={test} />
        <Child comment={comment2} />
        <Child comment={comment3} />
    </div>
  )
}

파괴 소품

소품은 자식 구성 요소에 전달될 때 구조가 해제될 수 있습니다. "props"를 전달하는 대신 소품의 객체 키가 중괄호 안의 매개변수에 전달됩니다. 이렇게 하면 키 이름으로 변수가 자동으로 생성됩니다. 이러한 변수는 props.comment 또는 props.testComment 대신 사용할 수 있습니다. 소품을 분해하면 구성 요소가 전달할 것으로 예상되는 소품을 읽고 결정하기가 더 쉽습니다.

const Child = ( { comment, testComment } ) => {
  return (
    <div>
        <p style={ {color:"red"} }>This is the Child component</p>
        <ul>
            <li style={ {color:"blue"} }>{comment}</li>
            <li style={ {color:"blue"} }>{testComment}</li>
        </ul>
    </div>
  )
}

구조 분해를 통해 소품에 대한 기본값을 제공할 수도 있습니다. 이것은 API를 사용하는 경우에 유용합니다. 가져오기 요청에 특정 항목이 포함되지 않는 경우가 있습니다. 구조를 분해할 때 소품에 대한 기본값을 제공하면 앱에서 빈 위치를 방지하기 위해 항목이 자동으로 값으로 채워질 수 있습니다. 공통 영역은 매개변수에 제공된 기본값으로 대체되는 끊어진 링크입니다. 아래 스니펫에서 하위 구성 요소에 다른 링크가 제공되지 않은 경우 사용할 URL이 링크 변수에 할당되었습니다.

const Child = ( { comment, testComment, link="https://dev.to/addisonfrei" } ) => {
  return (
    <div>
        <p style={ {color:"red"} }>This is the Child component</p>
        <ul>
            <li style={ {color:"blue"} }>{comment}</li>
            <li style={ {color:"blue"} }>{testComment}</li>
            <a href={link}>Addison's Blog</a>
        </ul>
    </div>
  )
}

결론

React 애플리케이션은 일반적으로 사용자가 애플리케이션으로 더 많은 작업을 수행할 수 있도록 함께 작동하는 여러 구성 요소로 구성됩니다. 컴포넌트는 React 빌딩 블록의 일부입니다. 개별적이고 재사용 가능한 코드 덩어리를 만드는 데 도움이 됩니다. 소품은 상위 구성 요소에서 하위 구성 요소로 전달됩니다. 자식 구성 요소 함수에 인수로 prop을 전달하여 액세스합니다. 소품은 개별 변수 이름으로 분해할 수 있는 개체를 만듭니다. 소품을 효과적이고 효율적으로 활용하는 방법을 배우는 것은 React 애플리케이션을 구축할 때 게임 체인저가 될 것입니다.