RealMenRoad

Ref dom에 직접 접근할 때 사용됨 일반 html에서는 dom요소에 이름을 달 때 id를 사용해 식별하고 접근하는데 react에서는 ref 방식으로 접근한다. id 사용을 권장하지 않는 이유 react에서 안에서 특수한 경우가 아니라면 id 사용을 권장하지 않음. 예를 들어 컴포넌트를 여러 번 사용한다고 html안에서는 id가 유일해야하는데 이런 상황에서는 중복 id를 가진 dom이 여러개 생기니 잘못된 사용입니다! ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않습니다. ref를 사용할 때는?? state로 해결할 수 없고 dom을 꼭 직접적으로 건드려야 할 때 아래와 같은 경우들 1. 특정 input에 포커스 2. 스크롤 박스 조작 3. 컨버스 요소에 그..

리액트는 뷰를 어떻게 렌더링하길래 데이터가 변할 때마다 새롭게 리렌더링하면서 성능을 아끼고 최적의 유저 경험을 제공 할 수 있을까요?? 리액트에서는 초기랜더링을 다루는 랜더함수 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 컴포넌트에 넘기며 해당 컴포넌트를 리렌더..

HTTP 프로토콜이란? HTTP(Hypertext Transfer Protocol) 프로토콜이란 상호 간에 정의한 규칙을 의미하며 특정 기기 간에 데이터를 주고받기 위해 정의다. 통신 프로토콜을 쉽게 풀어보면 "내가 이렇게 보낼게 너는 이렇게 받아" 라고 이해하면 되겠다. 웹에서는 브라우저와 서버 간에 데이터를 주고받기 위한 방식으로 HTTP 프로토콜을 사용하고 있습니다. HTTP 프로토콜 특징 HTTP 프로토콜은 상태가 없는(stateless) 프로토콜입니다. 여기서 상태가 없다라는 말은 데이터를 주고 받기 위한 각각의 데이터 요청이 서로 독립적으로 관리가 된다는 말입니다. 좀 더 쉽게 말해서 이전 데이터 요청과 다음 데이터 요청이 서로 관련이 없다는 말이죠. 이러한 특징 덕택에 서버는 세션과 같은 별..

Dom = 즉 html이란 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고 이벤트에 반응하고 값을 입력받는등 기능들을 수행할 객체들로 실체화된 형태라고 보면 됩니다. 이 html 요소들을 하나하나가 부품들이라고 치고 이것들로 조립돼서 만들어진 웹페이지를 가져다 주면 실제품으로 찍어낸게 dom이라고 봐도 되겠네요 dom은 자바스크립트 객체는 아니지만 자바스크립트가 제어할 수 있는 대상이라고 한다.(파이썬에서도 dom을 조작가능하다) 이유는 dom이 api를 갖고 있어서이다. --api이란 어떤 방식으로 명령이나 요청을 내리면 요청에 따라 기능들을 수행하도록 만들어 놓은것 dom은 브라우저라는 공장이 만든다. 헌데 공장들마다 만들어내는 제품들이 똑같애야하는데?? 이런 api 같은것들도 웹사이트 크롬..