[React] 3. 동적 변수와 Props

나무위키 같은 단순 정보만들 전달하는 정적인 웹도 있지만, 넷플릭스 같은 동적인 웹들도 정말 많다. 이런 동적인 인터렉션을 구현하기 위해서는 동적 변수가 필요하다.

컴포넌트에서 동적 변수 사용하기

리액트 컴포넌트는 JS + HTML 구조로 이루어져 있다.
HTML만 사용하듯 쓸 수 있지만 그러면 리액트 컴포넌트를 사용하는 의미가 무색해진다.

코드로 동적 변수를 직접 사용해보자!

수정 전

const reactDescriptions = ['Fundamental', 'Crucial', 'Core'];

function genRandomInt(max) {
  return Math.floor(Math.random() * (max + 1));
}

function Header() {
  return (
    <header>
      <img src="src/assets/react-core-concepts.png" alt="Stylized atom" />
      <h1>React Essentials</h1>
      <p>
        Fundamental React concepts you will need for almost any app you are going to build!
      </p>
    </header>
  );
}

<p> 태그 안에 Fundamental 이외의 값으로 변경하는데 reactDescriptions 배열의 원소 값으로 넣고 싶다면 아래 코드처럼 동적 변수를 사용할 수 있다.

수정 후

const reactDescriptions = ['Fundamental', 'Crucial', 'Core'];

function genRandomInt(max) {
  return Math.floor(Math.random() * max); // 0 ~ max-1 까지의 정수를 렌덤하게 반환
}

function Header() {
  return (
    <header>
      <img src="src/assets/react-core-concepts.png" alt="Stylized atom" />
      <h1>React Essentials</h1>
      <p>
    	{ reactDescriptions[getRandomInt(3)] } React concepts you will need for almost any app you are going to build!
      </p>
    </header>
  );
}

동적으로 변경하고 싶은 부분을 {} 를 사용해 변수값을 가져다 사용하고 있다.
변수를 사용한 것 처럼 {} 안에는 1+1, 123, 1 === 1 등 다양한 숫자와 JS 표현식들도 사용할 수 있다.

컴포넌트 Props 사용하기

컴포넌트를 재사용하기 위해서는 props라는 개념을 알아야 한다.

다른 예제 코드를 보자.

function Concept(props) {
  return (
    <li>
      <div>오늘 배울 주제 : {props.title}</div>
      <div>오늘 배울 내용 : {props.description}</div>
    </li>
  )
}

function App() {
  return (
    <div>
      <Header />
      <main>
        <h2>Time to get started!</h2>
        <ul>
          <Concept title="React" description="리액트 어쩌구 저쩌구" />
          <Concept title="Props" description="프롭스 어쩌구 저쩌구"/>
        </ul>
      </main>
    </div>
  );
}

먼저 App 컴포넌트의 <ul> 태그 안에 Concept 컴포넌트 2개를 사용하고 있다.
title="React" 처럼 컴포넌트에 전달하려는 속성과 값을 = 로 연결해 사용한다. 그리고 Concept 컴포넌트의 인자로 props를 넣어 객체처럼 사용하고 있다.

객체에 대해서 이해가 안간다면 JS Object 부분을 먼저 공부하는걸 추천!

props를 사용할 때, 객체를 다르게 표현할 수 있는데

function Concept({ title, description }) {
  return (
    <li>
      <div>오늘 배울 주제 : {title}</div>
      <div>오늘 배울 내용 : {description}</div>
    </li>
  )
}

props 대신 { title, description } 처럼 객체를 구조분해 해서 사용할 수 있다!

마지막으로 props 명칭은 꼭 props가 아니어도 된다. 예를 들어, concept, example 등등 상관없다!