React: JSX, 구성 요소 및 소품

바닐라 JavaScript에서 React로 전환하면 많은 프로그래머가 오늘날 많은 회사(Facebook, Airbnb 등)에서 React를 사용하는 이유를 이해하기 시작할 것입니다. React에서 코딩하는 과정은 특히 웹 페이지의 HTML에서 프로그래머의 코드와 해당 코드의 더 나은 레이아웃을 더 쉽게 이해하도록 합니다. 가장 먼저 배우게 될 것 중 하나는 JSX, 구성 요소 및 소품입니다.

JSX

JSX라고도 하는 JavaScript XML은 프로그래머가 JavaScript 코드 내에 HTML을 작성할 수 있도록 하는 React의 Babel을 통해 읽을 수 있는 구문 확장입니다. Babel은 JSX를 인식하고 그것이 HTML이 아니라는 것을 알고 있습니다. 헤더와 단락 요소를 포함하는 App 구성 요소가 있다고 가정해 보겠습니다.

function App() {
  return(
    <div>
      <h1> Hello, World! </h1>
      <p> Hope you have a good day! </p>
    </div>
  )
}

웹 페이지가 로드될 때마다 JSX는 웹 페이지에 표시하려는 내용을 정확히 알고 있습니다. 이 프로세스를 통해 우리의 코드는 명령형이 아닌 선언형이 됩니다. 코드가 어떻게 수행되는지 정확하게 작성하는 대신(명령적), 우리가 하고 싶은 것을 말할 수 있습니다(선언적). 따라서 바닐라 JS에서처럼 document.createElement() 및 document.quereySelector()를 작성하는 대신 JS 파일 내에 HTML 요소를 간단하게 작성할 수 있습니다!

구성품

위의 예에서 볼 수 있듯이 컴포넌트는 기본 JavaScript와 다른 React의 가장 중요한 부분 중 하나입니다. 구성 요소는 코드의 특정 부분이 어디에 있는지 보여줍니다. 구성 요소를 사용하면 코드의 레이아웃과 웹 페이지의 레이아웃을 더 깔끔하고 따라가기 쉽게 만들 수 있습니다. 구성 요소는 JSX를 반환하는 함수입니다. 이 함수는 구성 요소의 속성이 DOM에 적용된 후 어떤 모습이어야 하는지 React에 알려줍니다. 구성 요소의 기능은 항상 대문자로 시작해야 합니다. 또한 하나의 HTML 요소만 반환할 수 있습니다. 예를 들어:

function App() {
  return (
    <div> Hello, World!</div>
    <div> Goodbye! </div>
  )
}

두 개의div 요소가 반환되기 때문에 React는 하나의 요소만 반환할 수 있다는 오류를 반환합니다. 이러한 상황을 쉽게 해결할 수 있는 방법은 <>와 </>를 두 개의 div 요소 외부에 배치하여 React의 관점에서 구성 요소가 하나의 요소만 반환하도록 하는 것입니다.

소품

구성 요소가 받는 인수를 props라고 합니다. 대부분의 응용 프로그램에는 여러 하위 구성 요소로 구성된 상위 구성 요소가 있습니다. 부모 구성 요소는 다른 구성 요소(자식 구성 요소)에 대한 경로를 포함하는 최상위 구성 요소입니다.

function App() {
  return (
    <div>
      <AnimalDetails />
      <Comments />
    </div>
  )
}

위의 예에서 App는 자식 구성 요소 AnimalDetails 및 Comments의 부모 구성 요소입니다. 상위 구성 요소에서 하위 구성 요소로 정보를 전달하려면 각 구성 요소에 소품을 할당할 수 있습니다.

function App() {
  return (
    <div>
      <AnimalDetails 
        name = 'Max' 
        species = 'dog' 
        personality = 'Loves to go on walks!' />
      <Comments commentsText = 'Max is a really good boy!' />
    </div>
  )
}

이제 하위 구성 요소에 전달하려는 정보가 포함된 prop이 있으므로 이러한 prop을 웹 페이지에 표시할 다른 요소에 할당할 수 있습니다.

참고: 소품은 상위 구성 요소에서만 하위 구성 요소 간에 전달할 수 없습니다.

function AnimalDetails (props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <h3>{props.species}</h3>
      <p>{props.personality}</p>
    </div>
  )
}

props를 JSX로 호출하고 싶을 때마다 props를 내부에 포함{}한 다음 키 이름 앞에 props.를 사용하여 액세스해야 합니다.

파괴 소품

이전 예제에서 볼 수 있듯이 여러 개의 props가 전달되는 경우 코드가 prop.로 매우 어수선해 보이기 시작합니다. 코드를 더 깔끔하고 읽기 쉽게 만드는 손쉬운 솔루션으로 분해를 사용할 수 있습니다. 마지막 예에서 props 구성 요소의 인수로 AnimalDetails를 전달하는 대신 정보를 할당한 키 이름을 전달할 수 있습니다.

function AnimalDetails ({name, species, personality}) {
  return (
    <div>
      <h1>{name}</h1>
      <h3>{species}</h3>
      <p>{personality}</p>
    </div>
  )
}

소품을 분해할 때마다 전달되는 키 이름이 {} 안에 포함되어야 합니다. 이제 우리는 키를 전달하고 읽기 쉬운 깨끗하고 간결한 코드를 가질 수 있습니다!