TIL: 2022-05-23 React 입문

김하연·2022년 5월 22일
0

EventListener

<button onClick={}>클릭 이벤트</button>

React 에서 이벤트는 위 방식처럼 엘리먼트에 직접 이벤트를 추가할 수도 있지만, addEventListener를 이용한 방식도 사용이 가능하다.


1. Class형 컴포넌트

Class형 컴포넌트에서는 EventListener를 라이프 사이클 함수에 추가한다.
이벤트를 추가하려면, DOM에서 이벤트가 발생하는 요소를 가져와야 하므로 componentDidMount() 함수 안에 이벤트를 추가한다.
또한 컴포넌트가 사라질 때에 등록된 이벤트는 자동으로 사라지지 않고 남아있기 때문에 삭제처리를 꼭 해줘야하고 삭제 이벤트는 componentWillUnmount() 에서 removeEventListener 처리를 해줘야 한다.

hoverEvent = () => {
  this.circle.current.style.background = "yellow";
}
  
componentDidMount(){ // 이벤트 추가
  this.circle.current.addEventListener("mouseover", this.hoverEvent);
}

componentWillUnmount() { // 이벤트 삭제
  this.circle.current.removeEventListener("mouseover", this.hoverEvent);
}

2. 함수형 컴포넌트

함수형 컴포넌트에서는 useEffect() 라는 React의 훅을 사용한다.
라이프 사이클 함수 중 conponenetDidMount, componentDidUpdate, componentWillUnmount를 합쳐놓은 것과 같다고 보면 된다.
컴포넌트가 렌더링되면, React.useEffetc() 함수를 실행한다.

React.useEffect()=>{ 첫번째 함수 }[ Defendency Array ];

맨 처음 컴포넌트를 그릴 때, 즉 첫 렌더링에는 첫번째 함수가 무조건 실행되고
두 번재 렌더링, 리렌더링 될때는 화살표 함수는 무조건 실행되는게 아니라 Defendency Array에 들어가있는 요소를 확인해서 바뀐 요소가 있을 경우에만 화살표 함수가 실행된다.

const hoverEvent = (e) => {
  text.current.style.background = "yellow";
};

React.useEffect(() => {
  // componentDidMount, componentDidUpdate 부분
  text.current.addEventListener("mouseover", hoverEvent);
  return () => { // componentWillUnmount 부분
    text.current.removeEventListener("mouseover", hoverEvent);
  };
}, [text]);

라우팅이란

SPA란?

html 파일이 하나만 있는 구조
메인으로 이동하든, 페이지 a, 페이지 b로 이동을 하든 html 파일은 하나만 존재한다.
기존 방식의 웹사이트는 페이지를 이동할때마다 서버에서 html,css,js 등 정적자원들을 내려준다면 SPA는 딱 한번만 정적자원을 받아온다.
페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적이기 때문에..

SPA 단점

사용자가 안들어가 볼 페이지까지 한 번에 전부 가지고 오기 때문에 아주 많은 컴포넌트가 있다면 첫 로딩 속도가 느려진다.

라우팅

html은 딱 하나를 가지고 있지만, SPA도 브라우저 주소창대로 다른 페이지를 보여줄 수 있는데, 이렇게 브라우저 주소에 따라 다른 페이지를 보여주는 걸 라우팅이라고 부른다.




유사배열과 배열의 차이

배열

자바스크립트의 배열은 객체이지만, 일반 객체와 달리 인덱스와 length 프로퍼티가 존재한다.

  • index는 자신의 위치를 나타내는 0 이상의 정수이다.
  • array.length() 프로퍼티로 배열의 길이 확인이 가능하다.
  • index와 length 프로퍼티 덕분에 반복문을 통해 순차적으로 각 요소에 접근이 가능하다.

유사 배열

유사 배열은 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체를 말한다.
대표적으로 볼 수 있는 유사배열 객체에는 함수의 arguments, HTMLCollection, NodeList가 있다.

const array1 = ['a','b','c']; 					// ['a', 'b', 'c']
const array2 = document.querySelectorAll('p'); 	// NodeList [p, p, p, ...]
const array3 = document.body.children; 			// HTMLCollection [noscript, link, div, script, ...]

위에서 array1은 배열이지만, array2와 array3은 NodeList, HTMLCollection 로 유사배열 객체이다.

array2.push('a') // Uncaught TypeError: array2.push is not a function
array2.0 // Uncaught SyntaxError: Unexpected number

위와 같이 유사배열은 push, pop, join, map과 같은 배열 메서드 사용이 불가하며, 일반 객체처럼 프로퍼티로 접근할 수 없다.

유사 배열을 배열로 변환하기

ES6부터는 Array.from(유사배열객체)를 활용하여 유사배열을 배열로 변환이 가능하다. 문자열 등 유사 배열 객체나 이터러블한 객체를 배열로 만들어주는 메서드이다.

const array2 = document.querySelectorAll('p');
Array.from(array2);



Class타입 Component의 라이프싸이클 몇가지

1. 생성(mount)

  • Render
    컴포넌트를 렌더링하는 메서드입니다.

  • componentDidMount
    컴포넌트가 마운트 되었을 때, 즉 첫번재 렌더링이 완료되었을 때 호출되는 메서드로, 이 메서드가 호출되는 시점에는 화면에 컴포넌트가 나타난 상태이다.
    여기서는 주로 DOM을 사용해야 하는 외부 라이브러리 연동, ajax요청 등의 행위가 일어난다.

2. 업데이트(update)

  • componentDidUpdate
    컴포넌트가 업데이트 되고 난 후 호출되는 메서드

3. 제거(unmount)

  • componentWillUnmount
    컴포넌트가 화면에서 사라지기 직전에 호출되는 메서드
    DOM에 직접 등록했었던 이벤트를 제거하고, setTimeout을 추가했다면 clearTimeout을 통하여 제거한다.

4. 라이프싸이클 흐름

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

컴포넌트A render 호출 > 컴포넌트B render 호출 > 컴포넌트B componentDidUpdated 호출 > 컴포넌트A componentDidUpdated 호출




양방향 바인딩

  • 장점 : 코드의 사용면에서 코드량을 크게 줄여줌
  • 단점 : 변화에 따라 DOM 객체 전체를 렌더링해주거나 데이터를 바꿔주므로, 성능이 감소되는 경우가 있음

컨트롤러에서 model이 변경됨 > view변경됨
view에서 scope model이 변경됨 > 컨트롤러에서 model이 변경됨

이렇게 컨트롤러와 뷰 양쪽의 데이터 일치가 모두 가능한 것이 양방향 데이터 바인딩이다. 데이터의 변화를 감지해 템플릿과 결합해 화면을 갱신, 화면의 입력에 따라 데이터를 갱신하는 것이다. (HTML -> JS, JS -> HTML 양쪽 모두 가능)
양방향 데이터 바인딩은 데이터의 변경을 프레임워크에서 감지하고 있다가, 데이터가 변경되는 시점에 DOM 객체에 렌더링을 해주거나 페이지 내에서 모델의 변경을 감지해 JS 실행부에서 변경한다. 입력된 값이나 변경된 값에 따라 내용이 바로 바뀌기 때문에 따로 체크해주지 않아도 된다.
양방향 데이터 바인딩은 웹 애플리케이션의 복잡도가 증가하면 증가할수록 빛을 발한다. 수많은 코드의 양을 줄여줄 뿐만 아니라 유지보수나 코드를 관리하기 매우 쉽게 해주기 때문이다.

0개의 댓글