react 조건부 렌더링 with 삼항연산자, AND 연산자

렌더링은 클라이언트(사용자, 방문자 등)에서 서버의 파일을 브라우저에 뿌려주는 과정이다. 코드로 얘기하자면 처음 <html>태그(돔, DOM)가 나오고 그 다음에 <head>, <body> 순으로 나오는 것을 확인할 수 있다. 그러면 여기서 문제, HTML, CSS, JavaScript 중에서 가장 먼저 렌더링되는 것은 무엇일까? 정답은 HTML이다. 생각해보자. 우리의 컴퓨터 및 프로그램은 위에서 아래로, 좌에서 우로 문서를 파싱한다. 즉, 문서의 바탕이 되는 html을 가장 먼저 읽고 head안에 CSS파일을 읽는다. 그리고 최종으로 JavaScript가 렌더링된다.

 

즉, HTML -> CSS -> JavaScript로 렌더링이 진행되며 렌더링은 브라우저에 뿌려주는 과정을 말한다.

 

그렇다면 React의 조건부 렌더링은 무엇일까? 조건부라고 하면 왠지 if문 혹은 삼항연산자가 생각나지 않는가? if문의 조건문이 true이면 안에 있는 것을 실행하라라는 if문 말이다. 또, 삼항연산자도 마찬가지이다. 즉, 조건부 렌더링은 삼항연산자를 사용해서 true이면 이것을 실행하고 false이면 저것을 실행하라는 뜻이다. 아래 코드로 말하면 이해하기 쉬울 것이다.

 

class React extends Component{
	render(){
    	return(
        	<div>
        	{
            		1+1 === 2
                	? (<div>true</div>)
                	: (<div>false</div>)
            	}
            	</div>
        )
    }
}

위 조건문은 true이므로 true라는 문자가 출력된다.

 

삼항연산자는 true와 false 일 때 다른 것들을 보여주고 싶을 때 사용하는 반면, AND 연산자는 단순히 true일 때만 보여주고 false일 때에는 보여주고 싶지 않을 때 사용한다. 아래의 코드를 보면 이해하기 쉬울 것이다.

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 && (<div>True</div>)
        }
      </div>
    );
  }
}

이런식으로 사용하면 된다. 

이 글을 공유하기

댓글(0)

Designed by JB FACTORY