Kendrick's Blog

React에서의 조건부 렌더링조건부 렌더링이란 React render시 특정 조건에 따른 동작을 하게 하는 것입니다.사실 그냥 if문 사용과 다를게 없습니다. 이해하기 어렵지 않으실겁니다 하하아래 소스를 참고해보면render() { const isLoggedIn = this.state.isLoggedIn; let button = null; if (isLoggedIn) { button = ; } else { button = ; } return ( {button} );}isLoggedIn 메서드에 따라서 LogoutButton일지 LoginButton 일지 button변수에 할당해 줍니다.그 후 return 시 {button}으로 넣어주면 렌더링 시 isLoggedIn여부에 따라 다른 컴퍼넌트가 노출되겠죠?..

렌더링 요소 - Rendering Elements우리는 이전 포스트를 통해서 JSX를 이용해 렌더링 요소를 만들어봤습니다.const element = Hello, world;네 이겁니다DOM에 Element를 렌더링ReactDOM을 사용하면 Elements를 DOM에 렌더링 할 수 있습니다. ReactDOM.render();을 이용해서 넣어줍시다!id: root가 있네요const element = Hello, world;ReactDOM.render( element, document.getElementById('root') // root에 element를 렌더링 시켜줍니다. );ReactDOM은 필요한 것만 업데이트 한다.ReactDOM은 변경되는 부분이 있다면 그 부분만 변경합니다.일반적인 DOM이 아니..