[React] 조건부 렌더링(Rendering)


[React] 조건부 렌더링(Rendering)

조건부 렌더링(rendering)이란? 특정 조건이 참인지 거짓인지에 따라 다른 결과를 보여주는 것 먼저 App.js의 Hello 태그 안에 isSpecial을 작성한다. import React from 'react'; import Hello from './Hello'; // 현재 자신의 디렉토리에 있는 Hello 컴포넌트를 불러옴 import Wrapper from './Wrapper'; function App() { return ( <Wrapper> {/* true 또한 Javascript 값이기 때문에 중괄호로 감싸야 한다 */} <Hello name="react" color="red" isSpecial={true}/> <Hello color="pink"/> </Wrapper> ); } export default App; Hello.js 컴포넌트로 이동하여 아래 소스를 작성한다. 해당 소스는 삼항연산자를 활용하여 isSpecial 값의 true/false 에 따라 * 표시를 하...


#javascript #react #reactjs #rendering #렌더링 #리액트 #조건 #조건부 #조건부랜더링

원문링크 : [React] 조건부 렌더링(Rendering)