[React] 공식문서 공부 - 조건부 렌더링

| 조선부 렌더링

리액트에서는 특정 조건에 따라서 JSX요소를 렌더링 할 수 있습니다.

1. if 문 사용

function 컴포넌트(props) {
  if (props.isTrue) {
    return <div>조건이 참이면 렌더링</div>;
  } else {
    return <div>조건이 거짓이면 랜더링</div>;
  }
}

props.isTrue의 값에 따라 JSX요소를 렌더링 해줍니다.

2. 조건부 연산자 사용

function 컴포넌트(props) {
  return (
    <div>
      {props.isTrue ? (
        <p>조건이 참이면 렌더링</p>
      ) : (
        <p>조건이 거짓이면 렌더링.</p>
      )}
    </div>
  );
}

props.isTrue의 값에 따라 삼항 연산자를 사용하여 JSX요소를 렌더링 해줍니다.

3. && 연산자 사용

function 컴포넌트(props) {
  return (
    <div>
      {props.isTrue && <p>조건이 참이면 렌더링</p>}
    </div>
  );
}

props.isTrue의 값이 true일 경우에 JSX요소를 렌더링 해줍니다.

| 컴포넌트 렌더링 막기

어떠한 조건에 의해 컴포넌트 자체를 숨기고 싶으면

조건부로 null을 리턴하면 됩니다.

function 컴포넌트(props) {
  if (!props.isTrue) {
    return null;
  }

  return (
    <div>
      <p>조건이 참이면 렌더링</p>
    </div>
  );
}