React

윤건호·2022년 10월 4일
0

리액트,리덕스

목록 보기
2/9

키가 없다면?

어떠한 배열이 있다 가정하고 그 사이에 무언가를 추가하게 된다면,

기존 그 자리를 차지하고 있던 친구들이 하나씩 밀려, 새로 생긴 c라는 친구가 아닌

끝까지 밀려서 마지막 위치에 있던 친구가 새로 생기게 된다.

즉, 내가 수정하지 않은 내용들도 수정이 이루어진다.

키가 있다면?

키가 있다면 기본적으로 위의 내용과는 반대로 불필요한 작업들이 이루어지지 않고,

내가 추가한 내용이 추가한 위치에 쏙 들어가는 효율적인 일 처리가 진행되게 된다.

useRef

컴포넌트에서 특정 DOM 을 선택할 때 사용한다.

리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출 한 뒤 랜더링 이후
업데이트 된 상태를 조회할 수 있는 반면에,

useRef로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있다.

useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리랜더링되지 않는다.

Ref의 값은 current로 조회한다.

불변성

리액트의 state가 배열 또는 객체인 경우

리액트는 배열(객체)의 인스턴스 주소를 변화의 기준으로 인식한다.

state가 참조하는 배열 또는 객체의 내용이 수정된다고 해서
변화를 인지하지 못한다.

state의 값이 변화 시 랜더링되는 리액트 입장에서

인지를 못하면 리랜더링을 하지 않는다는 말이다.

방법

따라서 state의 변화에 따른 리랜더링을 위해서는

기존 배열, 객체의 내용을 직접 수정하는 것이 아니라,

기존의 배열과 객체를 복사하고 이를 수정한 후

state에 새로운 값을 업데이트 해야 한다.

사용하는 방법 2가지 : spread 연산자 사용 , concat 사용

전통 웹 사이트

한개의 HTML 파일이 하나의 페이지를 담당한다.

즉, 다른 페이지로 이동 할 경우, 또 다른 HTML 파일을 다운 받아야한다.

그 파일을 서버에서 전달해주고 이걸,
Server Side rendering 이라고 한다.

리액트

싱글 페이지 어플리케이션

HTML 변경없이 하나의 HTML 파일에서 동작하는 어플리케이션

위의 싱글 페이지 어플리케이션을 만드는 가장 대표적인 방법이
Client side rendering 이다.

대표적으로 일부 Client side rendering을 사용하고 있는

에어비앤비 홈페이지의 경우

에어비앤비에 접속할 때

그 사이트에 대한 정보를 서버에 요청하고

서버는 에어비앤비에 대한 정보를 유저에게 넘겨준다.

단일 html, 비교적 큰 사이즈의리액트 자바스크립트 파일

그 밖의 스태틱 파일들이 전달된다.

그 사이트 안에서 사이트와 유저의 인터렉션은 서버의 도움없이 동작한다.

위에 말했지만 그렇다고 에어비앤비 사이트 자체가

클라이언트 사이드 랜더링 방식 이라고 말할 순 없다.

각 랜더링 방식의 장점에 따라 섞어서 제작하는 경우가 많다.

profile
갭알자 호소인

0개의 댓글