리액트 - 6. 리액트에 조건문 사용하기

조건부 랜더링

  조건부 랜더링: 특정 조건에 따라 다른 결과를 화면에 보여주는 것을 의미

 

 리액트에서 조건문 사용하기 

 JSX문은 리액트에서 클래스 컴포넌트에서의 render 함수의 리턴되는 부분이나 함수 컴포넌트에서 리턴

 되는 부분을 말하는데 이 JSX문에 if 조건식을 사용할 수 없다. 만약 사용하고 싶다면 즉시 실행함수를 

 사용하거나 리턴문 위에 작성하면 된다. 

 

 주로 리액트의 JSX문 안에서 조건에 따른 분기 처리를 할때는 보통 삼항연산자 또는 단축평가 논리

 계산법(짧은 연산자)을 사용한다. 

 

 

 사용해보기 

 props에 name이 값이 전달되면 "환영합니다." 메시지를 출력되도록 하는 컴포넌트를 만들어보자! 

 

 (Welcome.jsx)

 

 function Welcome({ name }) {
   return (
     <div>
       즐거운 시간!
       {name ? <div>({name})님, 환영합니다.</div> : null}
     </div>
   );
 }
 
 export default Welcome;

 

이제 App 컴포넌트에서 Welcome 컴포너트를 불러와서 출력해보자! 

 

 import Welcome from "./Welcome";
 
 function App() {
   return (
     <div className="App">
       <Welcome name="Mike" />
     </div>
   );
 }
 
 export default App;

 

결과 화면

 

 

 App 컴포넌트에서 props로 name의 값, Mike을 전달했다. Welcome 컴포넌트에서는 전달된 name 값이

들어있으므로 (Mike)님, 환영합니다. 라는 메시지를 출력했다. 

 

이처럼 조건에 따라 화면을 달리 랜더링하고 싶을 때 조건식을 사용해서 구현할 수 있다. 

여기서 {name ? <div>({name})님, 환영합니다.</div> : null} 이부분은 삼항 연산자를 사용했다. 

 

삼항 연산자는 아래와 같이 작성하면된다. 

 조건 ? true 일 때 : false 

 

삼항 연산자는 조건식 ? A : B 의 형태로 작성하며 조건식이 참이면 A 부분을, 거짓이라면 B부분을 출력해준다. if문 조건식보다 간결하지만, 중첩 조건식일 경우는 오히려 삼항 연산자보다는 if문을 작성하는 것이 깔끔하다. 

 

 

위 코드에서 {name ? <div>({name})님, 환영합니다.</div> : null} 이부분은 단축 평가 논리 계산법

(이하 단축 평가 조건식)을 사용하면 name이 true인 경우만 출력하도록 할 수 있다. 

 

 {name && <div>({name})님, 환영합니다.</div>}

 

삼항 연산자보다 간결하게 조건식을 작성할 수 있다. 

 

단축 평가 논리 계산법(이하 단축 평가 조건식)에 대해 간단하게 알아보자! 

 

단축 평가 조건식

논리 연산자인  &&(AND 연산자), || (OR 연산자)의 특징을 활용해서 나타내는 방법이다. 

 

일단 &&(AND 연산자)에 대해서 알아보자!

 

 console.log(true && true); //true
 console.log(false && true ); //false

&&(AND 연산자)는 A && B 형태로 표현한다. 

A 가 true이면 B를 출력하고, 반대로 A가  false이면 A를 출력한다. 

 

다음으로 (OR 연산자)에 대해서 알아보자!

 

 console.log(false || true); //true console.log(true || false); //true

(OR 연산자)는 A || B 형태로 표현한다. 

OR 연산자는 AND 연산자와 반대의 개념이라 생각하면 된다.

즉, A 가 false이면 B를 출력하고, 반대로 A가  true이면 A를 출력한다. 

 

활용하기

 /* && 연산자 */
 '인사!' && console.log('hello'); 
 '' && '무시됩니다.';
 
 /* OR 연산자 */
 '안녕하세요' || '전, 무시당했어요';
 '' || '무시됩니다.';

 

 결과를 한번 예측해보자! 

 

 

 

 다시 리액트 코드로 돌아가서, 삼항 연산자을 단축 평가 조건식으로 변경해보자! 

 

 (Welcome.jsx)

 function Welcome({ name }) {
   return (
     <div>
       즐거운 시간!
       {name || <div>({name})님, 환영합니다.</div> }
     </div>
   );
 }
 
 export default Welcome;

 

 

보통 삼항 연산자는 true, false 에 따라서 결과를 달리 주고 싶을 때 사용하고 위처럼 true일 때만 

어떤 작업을 하고 싶다면 단축 평가 조건식을 사용하면 된다. 

 

 

추가로 jsx문에서 if문을 사용해보면서 마치도록 하겠다. 

물론 jsx문 밖에서는 if문으로 사용해도 되지만 jsx문에서는 if문을 바로 사용할 수 없다는 걸 기억하자! 

 

 function Welcome({ name }) {
  return (
     <div>
       즐거운 시간!
       {(function () {
         if (name) {
           return <div>({name})님, 환영합니다.</div>;
         }
       })()}
     </div>
   );
 }
 
 export default Welcome;
 

jsx문에서 if문을 사용하려면 위 코드처럼 즉시실행함수 안에 작성해주면된다. 

사실, 가독성에 좋지 않아서 if문을 작성하고자 한다면 jsx문 밖에 작성해주는 게 깔끔하다 

 

 

jsx문 밖에 if 조건식 사용하기 

 function Welcome({ name }) {
   function renderHelloMsg() {
     if (name) {
       return <div>({name})님, 환영합니다.</div>;
     }
   }
   return (
     <div>
       즐거운 시간!
       {renderHelloMsg()}
     </div>
   );
 }
 
 export default Welcome;
 
 

if문을 jsx 밖으로 빼서 renderHelloMsg 함수에 작성하고  jsx문 안에 이 함수를 실행했다. 

jsx문 안에 직접 작성하는 것보다 밖으로 빼서 작성하는 게 한결 보기 좋은 코드가 되었다. 

 

 

jsx문 안에서는 되도록이면 if문 보다는 삼항 연산자 또는  단축 평가 조건식을 사용해서 

구현하는 것이 좋다. 

 

 

이번 시간은 리액트에서 조건식을 사용해서 랜더링하는 방법에 대해 알아보았다.

다음 시간에는 리액트에서 배열을 사용하는 방법에 대해 알아보자!

 

끝!