[리액트 React] 3주차 입문 주차 팀 과제 정리

1️⃣ 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까요?

 

👌 유사배열

 

배열은 여러 개의 값을 순차적으로 나열한 순회 가능한 자료구조

유사 배열은 배열처럼 length가 있고, index로 프로퍼티 값에 접근할 수 있는 객체 (EX. NodeList)

유사 배열은 배열 메서드를 사용할 수 없다.

유사 배열을 수정하려면 Array.from 메서드를 사용해서 진짜 배열로 변경하고 배열 메서드를 사용하여 수정한다.

 

2️⃣ 부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요?

 

 

👌 생성될 때

 

constructer -> render -> React DOM 및 refs 업데이트 -> componentDidMount

 

 

👌 업데이트 할 때

 

render -> React DOM 및 refs 업데이트 -> componentDidUpdate

 

컴포너는 A에서 "르탄이"라는 state를 "진도사우르스"로 변경

 

부모 컴포넌트에서 Updating 발생

 

shouldComponentUpdate 가 실행  // 변경된 값만 렌더링 할 수 있는 기능

 

바뀐 props를 이용하여 부모 컴포넌트의 렌더링

 

마찬가지로 바뀐 props를 이어받아 컴포넌트 B의 렌더링이 실행된다.

 

 

3️⃣ 양방향 바인딩은 무엇일까요? 양방향 바인딩을 사용하는 경우 리렌더링이 어떻게 이루어질 지 그려보세요. (부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정하고 그려봅시다.)

 

👌 양방향 데이터 바인딩

 

뷰와 모델의 데이터를 동기화 한다는 것이다.

즉 사용자의 입력값에 따라 js의 데이터가 변경되고, js의 데이터가 변경되면 사용자의 화면도 변경된다.

• 장점코드의 양이 줄어든다.
• 단점변화에 따라 DOM 객체 전체를 렌더링 하거나 데이터를 바꿔 성능이 감소되는 경우가 있다.

👌 단방향 데이터 바인딩

 

한쪽 방향으로만 제어가 가능한 것을 의미한다.

js에서는 사용자의 화면을 변경할 수 있지만, 사용자는 js에 있는 데이터를 자동적으로 변경시키지 못하기 때문에 변화된 값을 감지하여 데이터 바인딩을 시켜주어야 합니다.

• 장점성능 저하 없이 DOM을 렌더링 시켜준다.
• 단점변화된 값을 매번 감지하고 바인딩하기 때문에 코드가 길어진다.

 

4️⃣ event listener는 등록되면 반드시 해제되어야 합니다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!) 그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까요?

 

👌 이벤트 리스너란?

 

사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것입니다

Ex) 마우스 클릭, 마우스 갖다대기, 키보드 누름 등등

왜 이벤트 리스너를 해제해야되나요?

웹 애플리케이션 메모리 누수의 원인이 될 수도있기때문에 해당 이벤트 리스너가 필요없어지면 반드시 삭제해야됩니다.

클래스형 컴포넌트의 생성, 제거(clean up)

 

👌 클래스형 컴포넌트의 생성, 제거(clean up)

 

text.current.addEventListener('mouseover', hoverEvnet);
// 생성하는 방법

text.current.removeEventListener('mouseover', hoverEvnet);
// 삭제하는 방법

return () => { text.current.removeEventListener("mouseover", hoverEvent); // 여기가 clean up 부분 componentWillUnmount 때 동작하는 부분 }; }, [text]);

return () => { text.current.removeEventListener("mouseover", hoverEvent); // 여기가 clean up 부분 componentWillUnmount 때 동작하는 부분 }; }, [text]);

 

👌 함수형 컴포넌트의 생성, 제거(clean up)

 

React.useEffect(() => {
text.current.addEventListener("mouseover", hoverEvent);
// rendering이 실행될 구문이 들어가는 부분
// componentDidMount, componentDidUpdate일 때 동작하는 부분
return () => {
    text.current.removeEventListener("mouseover", hoverEvent);
    // 여기가 clean up 부분 componentWillUnmount 때 동작하는 부분
};
}, [text]);

위처럼 함수형 컴포넌트는 라이프사이클 메소드를 사용할 수 없기때문에 리액트훅 useEffect()를 사용해야됩니다

첫번째 인자는 처음 렌더링할때 화살표 함수가 실행됩니다.

두번째 인자의 [text] dependency array(의존성 배열) 리렌더링(두번째렌더링) [text] 안에 요소를 확인후에 바뀐게 있을때만 화살표 함수를 실행합니다.

 

👌 리액트훅이란?

 

클래스 리액트 16.8 버전부터 추가된 기능이며, 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적이고 재사용성이 좋은 함수를 이용하여 작업할 수 있게 만든 기능

 

👌 리액트 훅 사용 규칙

 

1. **훅은 최상위 레벨에서만 호출 가능합니다(**반복문, 조건문, 중첩된 함수 내부에서 호출 불가능)

2. 훅은 오직 리액트 함수 컴포넌트 내에서만 호출 가능합니다.

 

 

5️⃣ 리액트에서는 DOM 요소에 접근하기 위해 주로 ref를 씁니다. domcument.getElementsByClassName 등을 쓰는 게 아니라 ref를 쓰는 이유는 무엇일까요?

 

React는 실제 DOM이 아닌 가상 DOM을 제어하고, 가상 DOM을 반영해서 실제 DOM을 그리기 때문에 실제 DOM을 잡는 DOM API의 사용을 지양한다.

따라서 React에서 DOM 요소에 접근하려면 render() 메서드로 생성된 가상 DOM에 접근할 수 있도록 하는 ref를 사용한다.

 

6️⃣ SPA 방식과 MPA 방식은 무엇인가요?

 

SPA(Single Page Application)는 한 개(single)의 Page로 구성된 application 이고,MPA(Multi Page application)는 여러 개(multi)의 Page로 구성된 application 이다.

MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고,그에 맞춰 전체 페이지를 다시 렌더링한다.

 

👌 장점

 

🔹 SPA의 장점

 

• 좋은 사용자 경험!
  • 전체 페이지를 업데이트를 할 필요가 없기 때문에 빠르다!(웹사이트의 성능과 직결된다.)
  • 전체 페이지를 업로드하면서 발생하는 '깜박' 거림이 없다.
  • 페이지의 일부만 바뀌는 것이기 때문에 application의 반응이 빠르다.
• 개발하기에 더 심플하다.
  • 서버의 사용없이도 개발을 시작할 수 있다.
  • 크롬으로 디버깅하기 쉽다.
• 로컬 데이터를 효과적으로 캐시(cache)* 할 수 있다.
  • SPA의 Appication은 서버에게 정적리소스를 한번만 요청한다.그리고 받은 데이터는 전부 저장해놓는다.이 데이터는 오프라인에서도 사용 가능하다.

(참고) 캐시(cache)란 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다.캐시에 데이터를 미리 복사해 놓으면 계산이나 별도의 접근 시간 없이더 빠른 속도로 데이터에 접근할 수 있다.

 

 

🔹 MPA의 장점

 

• SEO(Search Engine Optimization, 검색 엔진 최적화) 관점에 유리하다.*
  • MPA는 완성된 형태의 HTML파일을 서버로부터 전달받는다.따라서 검색 엔진이 페이지를 크롤링하기에 적합하다.

(참고) SEO는 홈페이지 혹은 콘텐츠를 검색 결과의 상단에 위치시키는 작업이다.검색 엔진은 '크롤링(Crawling, 웹 크롤러로 웹사이트 관련 데이터를 가져오는 과정)'과'인덱싱(Indexing, 크롤링을 통해 얻은 정보를 검색 색인에 저장하는 과정)'을 통해정보를 카테고리화 한다.

 

👌 단점 

 

🔹 SPA의 단점

 

• 초기 구동 속도가 느리다.
  • 초기에 웹 애플리케이션에 필요한 모든 정적 리소스를 한번에 다 받기 때문!
• SEO(Search Engine Optimization, 검색 엔진 최적화) 관점에 불리하다.*

근데 구글링하다보니 SPA에서도 단점(SEO 등)을 극복하기 위해CSR이 아닌 SSR방식을 적용하는 케이스가 있었다.

 

 

🔹 MPA의 단점

 

• 새로운 페이지를 이동하면 화면이 깜빡인다.
  • 새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링 하기 때문이다.
• 프론트엔드와 백엔드가 밀접하게 연관되어있다. (Tightly coupled!)
  • 프론트엔드와 백엔드가 서로 연관이 높아 개발이 복잡해질 수 있다.

 

👌 언제 사용하지?

 

SPA, MPA 둘 중에 어느 것을 사용해야 하는지는 확실히 정해진 바는 없다.

현재 개발하고 있는 프로그램이 베타 버전인지,계획중인 비지니스가 어떤 고객을 타겟팅하고 있는지,SEO 관점이 중요한지 등현재의 상황이 어떤건지 파악하고SPA, MPA 각자의 장단점을 고려하여 정하면 된다!

 

 

✅ 🔑 Q1. 이번 주차의 중요 키워드를 선정하고, 이것을 정리하는 질문과 답변을 만들어 주세요 :-)