4전 4전

리액트에서 컴포넌트는 화면에 보이기 전에 반드시 렌더링이 된다고 합니다. 그리고 이 렌더링 과정을 공식문서에는 아래와 같은 세 가지 단계로 설명을 하고 있습니다. 1. 렌더링 트리거 (Triggering a render) 2. 컴포넌트 렌더링 (Rendering the component) 3. DOM에 커밋 (Commiting to the Dom) 먼저 각 단계가 어떤 것을 의미하는지 알아보겠습니다. | 렌더링 트리거 (Trigger a render) 컴포넌트가 렌더링 되는 이유는 2가지가 있다고 하는데 아래와 같습니다. 1. 컴포넌트의 초기에 렌더링 2. 해당 컴포넌트나 상위 컴포넌트의 상태(state)가 업데이트되었을 때 1. 초기 렌더링 앱이 시작되면 초기 렌더링을 트리거하는 것이 필요합니다. 그리..

리액트에서 map(), filter()를 사용하여 배열의 있는 데이터들 모두 렌더링 하거나 특정 조건에 맞는 데이터만 렌더링 할 수 있습니다. | map() map() 함수를 사용하여 배열의 모든 데이터들을 한 번에 렌더링 할 수 있습니다. 아래와 같은 데이터가 있다고 하면 const items = [ { id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'orange' }, ]; 위 배열을 사용하여 리스트 형식으로 렌더링 하고 싶으면 { itmes.map((v, i) => { return {item.name} }) } 이런 식으로 사용하면 배열을 돌면서 각 데이터들의 정보를 렌더링 해줍니다. | filter() filter()를 사용하..

| 조선부 렌더링 리액트에서는 특정 조건에 따라서 JSX요소를 렌더링 할 수 있습니다. 1. if 문 사용 function 컴포넌트(props) { if (props.isTrue) { return 조건이 참이면 렌더링; } else { return 조건이 거짓이면 랜더링; } } props.isTrue의 값에 따라 JSX요소를 렌더링 해줍니다. 2. 조건부 연산자 사용 function 컴포넌트(props) { return ( {props.isTrue ? ( 조건이 참이면 렌더링 ) : ( 조건이 거짓이면 렌더링. )} ); } props.isTrue의 값에 따라 삼항 연산자를 사용하여 JSX요소를 렌더링 해줍니다. 3. && 연산자 사용 function 컴포넌트(props) { return ( {prop..

| 엘리먼트 렌더링 하기 1. 엘리먼트 리액트에서 엘리먼트는 리액트 앱의 가장 작은 단위라고 합니다. const element = hello, world; 엘리먼트는 화면에 표시할 내용을 기술합니다. 2. 렌더링 하기 HTML파일에 이런 div요소가 있다고 하면 이 요소를 ReactDOM.crearteRoot()에 전달하여 root 엘리먼트를 만들어주고 화면에 표시하고 싶은 리액트 엘리먼트를 root.render()에 전달하면 됩니다. const root = ReactDOM.createRoot(document.getElementById("root")); const element = hello, world; root.render(element); 이런 식으로 코드를 실행하면 화면에 hello, world가..