RealMenRoad

리액트는 뷰를 어떻게 렌더링하길래 데이터가 변할 때마다 새롭게 리렌더링하면서 성능을 아끼고 최적의 유저 경험을 제공 할 수 있을까요?? 리액트에서는 초기랜더링을 다루는 랜더함수 render() 가 있다. 이 함수는 단순히 html을 반환하는 것이 아닌 뷰가 어떻게 생겼고 어떻게 작동하는지 정보를 지닌 객체를 반환한다. 랜더 함수가 실행되면 내부에있는 컴포넌트들도 재귀적으로 랜더링한다. 최상위 컴포넌트의 렌더링 작업이 이끝나면 지니고 있는 정보들을 html 마크업을 만들고 이를 우리가 정하는 실제 페이지의 dom요소 안에 주입합니다. 조화 과정 컴포넌트에서는 데이터 변화에 따라 뷰가 변형되는 것이 아닌 새로운 요소로 갈아 끼우는 것 이작업 또한 render() 함수가 한다. . . . . 컴포넌트는 데이터..

하나의 페이지나 컴포넌트 내에도 수많은 상태값이 존재한다. 만약 이 상태 하나하나가 바뀔 때마다 화면을 리렌더링 한다면 문제가 생길수도 있다. 때문에 리액트는 성능의 향상을 위해서 setState를 연속 호출하면 배치 처리하여 한 번에 렌더링하도록 하였다. 아무리 많은 setState가 연속적으로 사용되었어도 배치 처리에 의해서 한 번의 렌더링으로 최신 상태를 유지하는 것이다. useState를 동기적으로 처리하는 방법? 함수를 전달하면된다.

리액트에서 state의 불변성을 유지해야 하는 이유는 다음과 같습니다. 불변성을 유지하면 성능이 향상됩니다. state를 업데이트할 때마다 새로운 객체를 생성하면 리액트는 이전 상태와 새로운 상태를 비교하여 변경된 부분을 찾아내야 합니다. 이 과정에서 객체가 변경되면 더 많은 연산이 필요하며, 이는 애플리케이션의 성능을 저하시킬 수 있습니다. 불변성을 유지하면 변경된 객체만 찾아내고, 나머지 부분은 이전 상태와 동일한 객체로 처리할 수 있으므로 성능이 향상됩니다. 불변성을 유지하면 디버깅이 용이합니다. 불변성을 유지하면 상태 변경을 추적하기 쉽습니다. 예를 들어, 객체를 직접 수정하는 경우 언제, 어떤 값이 변경되었는지 추적하기 어렵습니다. 하지만 불변성을 유지하면 변경된 값을 추적하기 쉬우므로 디버깅이..

리액트는 오로지 뷰만을 위한 라이브러리 초기 렌더링시에 render()함수가 실행됨 render함수는 가장 처음 어떻게 보일지를 정하는 렌더링에 사용되는 함수이다. 이 함수는 컴포넌트가 어떻게 생겼는지를 정의하는 역할을 합니다. html 형식의 문자열을 반환하지 않고 뷰가 어떻게 생겼고 어떻게 작동하는지 정보를 지닌 객체를 반환단다. 컴포넌트안에 자식 컴포넌트가 있다면 자식 컴포넌트는 재귀적으로 렌더링된다. 재귀적이다 라는 말은 재귀함수처럼 자기자신을 호출하면 가장 마지막으로 호출한 함수부터 실행되잖아요. 그렇게 이해하시면될듯해요 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 html 마크업을 하고 이를 우리가 정하는 실제 페이지의 DOM요소안에 주입된다. 초기 랜더링 1.렌더링 ..

useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같습니다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다. function Example() { // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다. const [count, setCount] = useState(0); React는 해당 변수를 리렌더링할 때 기억하고, 가장 최근에 갱신된 값을 제공합니다. count 변수의 값을 갱신하려면 setCount를 호출하면 됩니다. 용자가 버튼 클릭을 하면 setCount 함수를 호출하여 state 변수를 갱신합니다. React는 새로운 count 변수를 Example 컴포넌트에 넘기며 해당 컴포넌트를 리렌더..