ReactJS2 React 살펴보기 #8 Conditional Rendering React에서는 필요한 기능을 캡슐화한 고유한 컴포넌트를 만들 수 있다. 그리고 애플리케이션의 상태에 따라 이들 중 일부만 렌더링할 수 있다. React에서의 조건부 렌더링은 자바스크립트에서 조건문이 하는 방식과 동일하게 작동한다. 자바스크립트의 if나 조건 연산자같은 연사자들을 이용하여 현재 상태를 표시할 elements를 생성할 수도 있고, React가 거기에 맞춰 UI를 업데이트하도록 할 수도 있다. 아래의 두 component를 살펴보자function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.; } 사용자가 로그인 했는지의.. 2017. 5. 15. React 살펴보기 #6 State and Lifecycle 이전 섹션 중 하나였던 시계 예제를 되돌아보자. 지금까지 우리는 UI를 업데이트 시키는 단지 한가지 방법만을 배웠다. 렌더링된 출력물을 바꾸기 위해 우리는 ReactDOM.render()를 호출했다. function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); CodePen에서 확인하기 이번 섹션에서는 Clock 컴포넌트를 진짜로 재활용 가능하고 캡슐화된 상태로 만드는 방법을 배울 것이다. 이 새로운 컴포넌트.. 2017. 3. 27. 이전 1 다음 반응형
