React(2) 〓 Props, Conditional Rendering, ...

JS 사용법

React에서 JS 사용법

function Alarm(hour) {
  let timeOfDay;

  if (hour < 12) {
    timeOfDay = "Morning!!";
  } else if (hour > 17) {
    timeOfDay = "Night!";
  } else {
    timeOfDay = "Afternoon!!!";
  }

  return timeOfDay;
}

export default function App() {
  const hour = new Date().getHours();

  return <div className="App">{Alarm(hour)}</div>;
}

React에서 JS 문법을 사용하는 건 별로 어렵지 않습니다.
파일에서 사용하는 함수 안이든 밖이든 쓸 수 있고, 위 코드와 같이 <div classname... 이라고 돼 있는 html 같은 html 아닌 것을 반환할 수도 있습니다.

Props

Property, 컴포넌트 속성

Props(Property, 컴포넌트 속성)는 속성을 나타내는 데이터로, 부모가 이런 식으로 호출할 때 데이터를 넣어 주어 자식에서 번거롭게 작업할 필요 없이 변경해 주는 역할을 합니다.

import { Test } from "./Test";
export default function App() {
  return (
    <div className="App">
      <Test
        name="Seongho"
        hobby="Game"
        mbti="INTP"
        email="seongho.cho@kodekorea.kr"
        a={true}
        b={13}
        c={{ a: 1, b: 2 }}
        d={[1, 2]}
      />
      <Test name="Hwangsee" hobby="Game" mbti="GAME" email="GAME@GAME.GAME" />
      <Test name="Jincancer" hobby="Game" mbti="몰랑" email="jinarm@kodrea.kr" />
      <Test name="minho" hobby="Game" mbti="몰랑" email="minho@kodrea.kr" />
    </div>
  );
}

이렇게 <Test 따위의 안쪽에다가 이름을 붙이고 값을 넣어 주면 자식에서 데이터로 불러올 수 있습니다.

export function Test(props) {
  var name = props.name;
  var hobby = props.hobby;
  var MBTI = props.mbti;
  var email = props.email;

  return (
    <div>
      <h1>Hello, My name is {name}!</h1>
      <p>My hobby is {hobby}.</p>
      <p>My MBTI is {MBTI}.</p>
      <p>My email is {email}.</p>
    </div>
  );
}

이렇게 var를 이용해서 불러올 수도 있고 전에 배웠던 Distructuring을 이용해서 쓸 수도 있습니다.
Test({name, hobby, MBTI, email}) 이런 식으로요.

Conditional Rendering

조건부 렌더링

조건부 렌더링은 Props에서 받은 데이터를 조건에 따라 렌더링할 수 있도록 해 줍니다.
백문이 불여일견이니 직접 보겠습니다.

export function Test(props) {
  var name = props.name;
  var hobby = props.hobby;
  var MBTI = props.mbti;
  var email = props.email;
  var a = props.a;
  var b = props.b;
  var c = props.c;
  var d = props.d;

  return (
    <div>
      <h1>Hello, My name is {name}!</h1>
      <p>My hobby is {hobby}.</p>
      <p>My MBTI is {MBTI}.</p>
      <p>My email is {email}.</p>
      {a && <p>Extra Line</p>}
    </div>
  );
}

위 코드에서 {a && <p>Extra Line</p>} 부분과 같이 사용하는 걸 조건부 렌더링이라 하는데,
참이면 맨 오른쪽에 있는 <p>Extra Line</p>이 렌더링되고 거짓이면 렌더링하지 않는 코드가 됩니다.
만약에 무조건 렌더링을 해야 하는 상황이 온다면 삼항 연산자를 이용해서 쓰면 됩니다.

{a ? <p>Extra Line</p> : <p>extra line</p>}

참고로 NULL이나 True, Undefined 같은 건 출력되지 않습니다.
0이나 1 같은 건 예외로 출력됩니다(true, false로 인식하지 않는 듯합니다).