react 렌더링2 조건부 렌더링 React의 조건부 렌더링은 자바스크립트에서 동작하는 것과 동일하게 동작합니다. if나 조건 연산자같은 자바스크립트 연산자를 사용하여 현재 state를 나타내는 요소를 만들고 React가 UI를 업데이트하여 일치시킵니다. function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.; } 사용자의 로그인 여부에 따라 다음 컴포넌트 중 하나를 표시하는 Greeting 컴포넌트를 만들었습니다. function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; } return ; }.. 2021. 1. 21. 요소의 렌더링 const element = 나는 요소이다.; 위와 같은 React앱의 요소는 순수한 객체이고 생성 비용이 저렴합니다. DOM에서 요소 렌더링하기 HTML 파일 어딘가에 태그가 있다고 생각해봅시다. 위 태그는 루트 DOM이라고 부릅니다. 우리가 생성한 React 요소들을 렌더링하게 되면 위 메인 루트에 다시 렌더링됩니다. 생성한 모든 React 요소들은 위 태그에 붙게 된다는 말 입니다. const element = 나는 요소다.; const element2 = () => { return ( {element} 리액트 입니다. ) }; ReactDOM.render( element2, document.getElementById('root') ); 렌더링된 요소 업데이트 React 요소는 변경불가능합니다. 아.. 2021. 1. 10. 이전 1 다음
