React 조건부 렌더링

리액트 에서 조건부 렌더링을 사용 할때는 

{ }중괄호 안에서 

즉시실행 if 문이나  삼항연산자를 사용한다.

조건부 렌더링 부분에서는 템플릿 안에서 엘리먼트에 v-if 디렉티브를 사용하는 vue.js 가 react 보다 훨씬 편한것 같다.

이부분은 좀 적응되기전까진 소스를 알아보기가 힘들것 같다.

class App extends Component {
    render() {
        let isBool = true;
        return (
            <div className="App">

                {/*if 즉시실행 함수*/}
                {
                    function () {
                        if(isBool) return (<div>true</div>)
                        if(isBool) return (<div>false</div>)
                    }()
                }

                {/*if 즉시실햄 함수 arrow function*/}
                {
                    (()=>{
                        if(isBool) return <div>true</div>
                        if(isBool) return <div>false</div>
                    })()
                }

                {/*3항연산자*/}
                {isBool ?<div>true</div> :<div>false</div>}

            </div>
        );
    }
}

결과

참고

https://reactjs.org/docs/getting-started.html

https://velopert.com/reactjs-tutorials