입문주차 때 팀과제를 통해 React 시작 전 알아야 하는 기본 개념들에 대해서 정리할 수 있었다.
주특기가 3주밖에 진행되지 않기 때문에, 알야하는 개념들은 최대한 많이 숙지하고 넘어가야겠다.
🔐 자바스크립트에서 유사배열과 배열의 차이
유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까?
유사 객체 배열은 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다. JS에서 querySelectorAll이나 document.body.children으로 엘리먼트를 가져오면 유사 배열 객체에 담겨서 온다.
- 요소를 수정하는 방법
- Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해새로운Array 객체를 만듭니다.(MDN)
- 배열에 내포되어있는 기능들을 유사배열에서 사용하기 위해 call, apply, bind을 사용한다. (apply와 call은 함수를 호출하는 방법 중 하나로, 다른 객체에 내포되어있는 함수를 내것처럼 사용할 수 있게 해준다.)
🔐 컴포넌트의 라이프 사이클 흐름
- 부모 컴포넌트 A와 자식 컴포넌트 B가 있다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있다.
컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름은?
🔐 양방향 바인딩이란?
양방향 바인딩을 사용하는 경우 리렌더링은 어떻게 이루어지나?
(부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정)
- 양방향 바인딩을 사용할 경우:
- 자식의 데이터가 변경된다.
- 이를 부모에게 전달한다.
- 자식은 부모의 데이터가 업데이트 되면 해당 데이터를 상속 받는다.
즉, 자식의 변경이 부모에게 반영되는 경우 무한 루프가 발생된다. 그렇기 때문에 리액트는 예외의 경우도 있지만 기본적으로 단방향 바인딩으로 작동한다.
🔐 event listener는 등록되면 반드시 해제되어야 한다.
클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제한다.
그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 하나?
1. 이벤트 리스너
이벤트 리스너는 DOM객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다.
이벤트 리스너를 이용하면 특정 DOM에 위에서 말한 Javascript 이벤트가 발생할 때 특정 함수를 호출한다.
이벤트 리스너의 경우 웹 애플리케이션 메모리 누수의 원인이 될 수 있다. 더 이상 해당 이벤트 리스너가 필요 없다고 하면 반드시 추가된 이벤트 리스너는 반드시 삭제해주어야 한다.
2. 함수형 컴포넌트에서 event listener 해제하기
그럼 라이프 사이클 메서드를 사용할 수 없는 함수형 컴포넌트에서는 어떻게 event를 실행시기고 해제해야할까?
useEffect
함수형 컴포넌트에서는 각각의 라이프사이클 메소드를 useEffect 하나로 통일시킬 수 있다. 대신 dependency를 선언하여 시점을 구분한다.
useEffect(() => {
console.log('hi')
}, [/* dependency 선언하는 곳 */])빈 배열을 선언하면 최초 로드시에만 렌더링이 된다.
3. 이벤트 실행하기
useEffect를 이용해서 최초 로드 시에 addEventListener를 사용하여 이벤트를 추가해주면 이벤트 감지가 시작된다.
useEffect(() => {
document.addEventListener();
}, [])4. 이벤트 해제하기
이벤트를 등록하고 난 뒤 성능 저하를 방지하기 위해 컴포넌트가 언마운트 될 때 꼭 이벤트 등록을 해제해주어햐 한다. 함수형 클래스에서는 useEffect의 내부 함수의 return값으로 removeEventListener를 통해 해제해주면 된다.
useEffect(() => {
document.addEventListener();
return () => {
document.removeEventListener();
}
}, [])🔐 리액트에서는 DOM 요소에 접근하기 위해 주로 ref를 쓴다.
domcument.getElementsByClassName 등을 쓰는 게 아니라 ref를 쓰는 이유는?
일반 HTML에서 DOM요소에 이름을 달 때는 id를 사용는데 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 ref 이다. ref를 사용하는 시기는 DOM 을 꼭 건드려야 할 때 사용하며
° 특정 input에 포커스 주기
° 스크롤 박스 조작하기
° Canvas 요소에 그림 그리기등
위와 같은 경우에는 어쩔 수 없이 DOM에 직접적으로 접근해야한다.리액트 공식 문서에 보면
선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양해야한다.
ref의 사용을 최대한 줄여야 한다고 명시되어있다.
대충 ref에 대한 설명을 하였고 사용하는 이유는?
id는 유일해야 하지만 컴포넌트 재사용을 한다면 중복될 가능성이 있다.
ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동한다.
하지만 리액트에서도 id를 사용할 수는 있다👍
🔐 SPA 방식과 MPA 방식
SPA(Single Page Application)는 한 개(single)의 Page로 구성된 application 이고,
MPA(Multi Page application)는 여러 개(multi)의 Page로 구성된 application 이다.
MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고,그에 맞춰 전체 페이지를 다시 렌더링한다.인터넷 주소창에 주소를 입력하거나, 링크를 클릭하는 등 사용자가 어떤 요청을 하면,그에 맞는 html, 이미지 등의 파일들이 전부 다운로드 되고 다시 렌더링 된다.
반면 SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드한다.그 이후 새로운 페이지 요청이 있을 경우,페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신한다.어떤 링크를 클릭한다고 해서 그에 관련된 모든 파일을 다운받는게 아니라,필요한 정보만 받아서 그 정보를 기준으로 업데이트 될 뿐이다.
