[React] - 조건부 렌더링

조건부 렌더링

• 조건부 렌더링이란, 특정 조건에 따라 결과물을 렌더링 하는 것을 의미합니다.
• 예를 들어, App.js 컴포넌트에서 Hello.js 컴포넌트를 사용할 때, isSpecial이라는 props를 설정해보겠습니다.

• 여기서 true는 자바스크립트 값이기 때문에 중괄호로 감싸주었습니다.
• 그리고, Hello 컴포넌트에서 isSpecial이 true이냐 false이냐에 따라서 컴포넌트의 좌측에 *표시를 보여줘 보겠습니다.이를 처리하는 가장 기본적인 방법은, 삼항연사자를 사용하는 것입니다.

• isSpecial 값이 true라면 <b>*</b>를, 그렇지 않다면 null을 보여주도록 했습니다.
• 참고로 JSX에서 null, false, nudefined를 렌더링하게 된다면 아무것도 나타나지 않게 됩니다.

• 보통 삼항연사자를 사용한 조건부 렌더링을 주로 특정 조건에 따라 보여줘야 하는 내용이 다를 때 사용합니다.
• 지금은 내용이 달라지는게 아니라, 단순히 특정 조건이 true면 보여주고 그렇지 않다면 숨겨주고 있습니다.
  이러한 상황에서는 && 연산자를 사용해서 처리하는 것이 더 편리합니다.
• Hello.js 코드를 수정해 보겠습니다.

• isSpecial && <b>*</b>의 결과는 isSpecial이 false일땐 false이고 isSpecial이 true일땐 <b>*</b>가 됩니다.

---

props  값 설정을 생략하면 ={true}

• 컴포넌트의 props 값을 설정하게 될 때 만약 props 이름만 작성하고 값 설정을 하지 않는다면, 이를 true로 설정한 것으로 간주합니다.

• App.js의 isSpecial={true}의 값을 isSpecial만 작성하여 실행시켜도 같은 ={true}의 값과 같은 결과가 나오는 것을 확인할 수 있습니다.