220317 [TIL] Today I Learned 💯 React.js

React.js

 

 

🚩 목차

 

- 클래스형 컴포넌트

- 함수형 컴포넌트

- 배열 컴포넌트

- 컴포넌트에서의 콜백과 이벤트리스너

 

 

 

 

 

클래스형 컴포넌트

 

생명주기 메소드와 컴포넌트 구성요소를 모두 포함하는 클래스형 컴포넌트.

 

총 두가지 종류의 클래스를 사용.

 

- Component

- PureComponent

 

1 / Component 클래스

- props, state, life-cycle method가 들어있는 구조의 컴포넌트

 

2 / PureComponenet 클래스

- Component 클래스를 상속받은 클래스.

- shouldComponentUpdate() 함수를 얕은 비교를 하도록 재정의.

 

📌 shouldComponentUpdate(nextProps, nextState) 
 
프로퍼티를 변경하거나 setState()를 호출하여 state를 변경하면
다시 렌더링해야하는지 판단하는 함수.
 
즉, 리렌더링 할지 말지 판단. 화면 변경을 위한 검증 작업.
데이터 변화를 비교하는 작업 포함됨. (성능에 영향 多)

 

- 얕은 비교를 통해 데이터가 변경된 경우에만 render()을 호출함.

 

- 📂 reactjs.org/docs

React.PureComponent is similar to React.Component. 

The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), 

but React.PureComponent implements it with a shallow prop and state comparison.

 

🙋‍♂️ 얕은 비교(shallowCompare) 란?

const list1 = [1, 2, 3, obj];
const list2 = [1, 2, 3, obj];

- 얕은 비교에서 list1과 list2는 같다.
- cf. 깊은 비교 (===)에서는 list1과 list2는 reference가 다르므로 다르다.

___

shallowCompare는 현재 상태 및 nextState 객체뿐 아니라
현재 props 및 nextProps 객체에 대해 얕은 동등성 검사를 수행합니다.

얕은 비교는 동등성을 확인합니다.
스칼라 값 (숫자, 문자열)을 비교할 때는 값을 비교합니다.
객체를 비교할 때 객체의 속성을 비교하지 않습니다. 참조(Reference) 만 비교됩니다. 
>> 동일한 객체를 가리키는지.

- shallow compare 에서 
object들은 레퍼런스만 체크하기때문에 같은 값이 들어있는 object이더라도 항상 다른값으로 체크하게 됩니다.

 

Component	항상 render()함수 호출
PureComponent	얕은 비교를 통해 데이터가 변경된 경우에만  render() 호출

 

 ❕ React.PureComponent를 사용할 수 있는 상황

1. state와 prop이 immutable일때
( scalar 값들은 shallow compare로 값을 비교하기 때문에 상관없지만
object들은 reference로 다름을 체크하기 때문에 적절치 못하게 사용될수 있음)

2. state와 prop이 계층(hierarchy) 혹은 복잡한 구조를 가지고 있지 않을때

3. shouldComponentUpdate lifecycle을 사용하지 않을 계획일때

 

shallowCompare을 위해 shallow-equal 라이브러리의 shallowEqual() 함수를 이용.

 

import React from 'react';
import shallowEqual from 'shallow-equal';

export class PureComponent extends React.Component {
   shouldComponentUpdate(nextProps, nextState) {
      return !shallowEqual(this.props, nextProps) ||
             !shallowEqual(this.state, nextState)
      }
 }
 
 // ref가 달라도 값이 같다면 true를 반환하므로, return (!true || !true)가 됨
 // props랑 state 둘중 하나만 안변해도(즉, 같아도) return false
 // shouldComponentUpdate()가 false를 return 하므로 render()가 실행 안됨!
 // ❕ shouldComponentUpdate()가 true여야 다음 (life-cycle)과정인 render()을 진행하므로

 

 

▪ PureComponent 클래스로 선언한 컴포넌트에서는

shouldComponentUpdate()에서 shallowEqual()함수로 얕은 비교를 하여

데이터의 변경이 있으면 - 화면 새로 출력 - render()호출함

데이터의 변경이 없으면 - return false -  render()호출 안함

 

▪ Component 클래스로 선언한 컴포넌트는 비교과정 없이 항상 새로 렌더링함.

(데이터의 변경이 있든 말든~)

 

 

 

 

🚀

앱의 성능을 최대화 하기 위해

PureComponent와 불변 변수를 사용.

 

- 예> 에어비앤비에서

숙소 정보가 10000개가 있다면, 1개의 정보만 수정했을 때마다

9999개의 숙소 정보를 비교하면 비효율적임.

 

- 정보가 바뀔 때 마다 새 배열을 할당하는 방식으로 

비교속도를 최적화 할 수 있음

 

 

 

🔻 책 예제 이해 안가서 혼자 주저리 📝

ㅇ

답: 

MyComponent 새로고침

MyComponent 새로고침

MyPureComponent 새로고침

 

__

 

이라고 하는데, 왜 그런지 모르겠다.

첫번째로 setTimeout() 처음꺼를 실행하면

this.listValue[0].name = 'Justin'; 으로 props를 수정한다.

 

여기서 MyComponent는 무조건 리렌더링 하니까 pass하고

MyPureComponent도 얕은비교로 했으니 props가 변한 것 아닌가?

state도 변한것이고. 

 

근데 이게 아마 props는 안변해서 - return false해서 - 렌더링 안됨

이렇게 구현이 되어서 정답이 저렇게 된 것 같은데,

 

내생각엔 ... 

새로 배열을 할당하는게 아니고서야 listValue의 첫번째 요소의 값만 바뀐거니까

얕은 비교로도 저게 안변한걸로 치나보다. 즉, 

 

 return !shallowEqual(this.props, nextProps) ||
             !shallowEqual(this.state, nextState)
      }

이부분에서 this.props 랑 nextProps가 같다! Equal!로 판명나고

this.state랑 nextState는 값이 확실히 달라졌으므로 Equal이 아니고.

 

return !true ||  !false 해서 false가 리턴된듯. (state는 변했어도 props가 안 변했음)

그래서 첫번째 setTimeout에선 PureComponent는 렌더링 안된것.

 

처음엔 첫번째 setTimeout에서

MyComponent 새로고침

MyPureComponent 새로고침

가 나온다고 예상했다.

 

이제 두번째 setTimeout()을 보면

this.listValue, 즉 props를 아예 배열형태로 새로 대입 (=)을 해버렸으니

이건 값이 바뀐거라고 보면 된다.

 

이제 보면 props도 변하고, state도 변했다.

return !false || !false 해서 true를 리턴한 것.

 

 

 

 

🔑 key point

 

this.listValue = [{name: 'Park'}, {name: 'Lee'}]; 일때,

 

1️⃣ this.listValue[0].name = 'Justin';

- 배열 안에 객체의 속성값이 바뀐거임.

- 즉, 배열(listValue)이 바뀐건 아님. 얕은 비교를 하면 얘는 this.props = nextProps

 

2️⃣ this.listValue = [{name: 'Justin'}, {name: 'Lee'}];

- 배열 자체를 대입(=)으로 바꿔버림.

- 안에 값은 같을지 몰라도, listValue 자체가 새로 선언되었으므로 this.props != nextProps.

 

 

 

 

함수형 컴포넌트

 

- state가 없는 함수형 컴포넌트 (SFC)

- React.StatelessComponent인데, 줄여서 SFC로 사용 가능.

 

- state를 포함하지 않으며, 데이터를 받아 출력할 컴포넌트를 반환함.

데이터(prop, context) => 함수형 컴포넌트 => 출력할 컴포넌트 (JSX)

 

- state가 없고, 프로퍼티와 컨텍스트만으로 화면을 구성하므로 단순한 구조의 UI 컴포넌트를 제작할때 주로 사용.

- 생명주기 함수도 사용할 수 없음.

 

 

function TodaysPlanApp(props) {
  const { onButtonClick, hasPlan } = props;

  return (
    <div>
      {hasPlan ? <TodaysPlanApp /> : null}
      <button onClick={onButtonClick}>계획 없음</button>
    </div>
  );
}

export default TodaysPlanApp;

 

onButtonClick 함수와 hasPlan을 props로 받고,

hasPlan이 true면 렌더링하고, false면 렌더링하지 않음.

 

 

 

 

배열 컴포넌트

 

- 게시판 or 유튜브 영상 목록 등의 구현.

- 자바스크립트 배열(array) 사용

 

 

배열 안에 다양한 자료형을 저장할 수 있음

>> JSX도 배열에 저장 가능.

 

map()함수를 이용하여 여러 화면을 손쉽게 출력(rendering) 가능.

 

const toDoList = [
  { taskName: "빨래하기", finished: false },
  { taskName: "공부하기", finished: true },
];


const toDos = toDoList.map(todo => <li>{todo.taskName}</li> );
// JSX로 변경도 가능
const toDos = toDoList.map(todo => <TodoTask taskname={todo.taskName} />);

// return 부분
return(
  <div>
      <ul>
         {toDos}
      </ul>
  </div>

 

 

 

🙋‍♂️ map() 이용하여 배열 컴포넌트 출력

 

- 바로 render() 안에서 map()함수로 출력하는 방법.

render() {
   const toDoList = [
      { taskName: "빨래하기", finished: false },
      { taskName: "공부하기", finished: true },
    ];
    
    return (
       <div>
          <ul>
             {toDoList.map(todo => <li> {todo.taskName} </li>);}
          </ul>
       </div>
    );
}

 

 

❗❗ 주의사항

• 배열 컴포넌트는 배열 요소의 개수만큼 map에 의해 반복되므로 성능에 영향을 많이 준다.
• 따라서 배열 컴포넌트에는 꼭 key값을 정의해줘야한다.
• 출력한 배열 컴포넌트는 다시 출력해야하는 경우, 리액트가 기존 컴포넌트를 재활용함.

 

 

 

render() {
   const toDoList = [
      { taskName: "빨래하기", finished: false },
      { taskName: "공부하기", finished: true },
    ];
    
    return (
       <div>
          <ul>
             {toDoList.map(todo, index => <li key={`list_${index}`}> {todo.taskName} </li>);}
          </ul>
       </div>
    );
}

- 키값으로 고유한 배열 항목을 사용해야 비효율 문제가 해결됨.

(위에처럼 인덱스 번호를 키로 사용한다면, 만약 나중에 항목이 사라지게 해서 인덱스가 사라지면, 키값도 사라짐.)

- taskName에 고유한 값이 들어있으므로, 이를 키값으로 사용하면 좋다.

 

 

결론:   key값으로 무조건 index를 쓴다? - 비추천.

 

🔻 key값으로 taskName을 사용

render() {
   const toDoList = [
      { taskName: "빨래하기", finished: false },
      { taskName: "공부하기", finished: true },
    ];
    
    return (
       <div>
          <ul>
             {toDoList.map(todo, index => <li key={todo.taskName}> {todo.taskName} </li>);}
          </ul>
       </div>
    );
}

 

 

 

 

🙋‍♂️ render()에서 여러개의 JSX 노드 반환

 

- render()은 트리구조의 노드를 반환함.

- 리액트는 트리 말고도 배열구조의 노드를 반환할 수 있음!

 

예> <button type="button"> Click! </button>을 3개를 반환하고 싶을 때

 

...
render() {
   return (
      <button type="button"> Click! </button>
      <button type="button"> Click! </button>
      <button type="button"> Click! </button>
  )
}

// ❗ Error

 

리액트 16.3 까지는 render()함수는 트리구조의 노드 1개까지만 반환할 수 있고,

여러 노드를 반환하려면 의미없는 <div>로 감싸줘야 했다.

 

리액트 16.3 이후로는 React.Fragment 컴포넌트의 추가로,

의미없는 노드를 추가하는 것을 개선하였다.

 

React.Fragement

 

여러 노드를 사용할 때 반환.

이 컴포넌트는 HTML 로 변환되지 않음.

 

render() { 
    return (
    	<React.Fragment>
    	    <button></button>
            <button></button>
            <button></button>
        </React.Fragment>
    );
  }

render() { 
    return (
    	<>
    	    <button></button>
            <button></button>
            <button></button>
        </>
    );
  }

<React.Fragment> </React.Fragment>

또는

<> </>

로 여러 노드를 감싸주면 된다!

 

 

 

 

+) map의 사용

render() {
  return [1,2,3].map((num) => (
    <input type="radio" name="option1" key={`${num}`} value={num} />
  ))
}

 

 

 

컴포넌트에서의 콜백과 이벤트리스너

 

프로퍼티 (props) 사용시 - 상위 컴포넌트의 데이터를 하위 컴포넌트에 전달 가능. (Read Only)

 

만약, 하위 컴포넌트에서 프로퍼티를 변경해야 할 때는?

- 프로퍼티 원본을 수정할 수 있는 콜백함수를 하위 컴포넌트에 같이 넘겨줌.

💡 콜백 함수
- 정의된 위치에서 실행되지 않고, 이후 특정 상황에서 실행되는 함수

 

 

예제 - Counter

 

App.jsx

import React from 'react';
import Counter from "./Counter";

class App extends Component {
  state = {
    count: 1,
  };

  increaseCount = () => {
    this.setState(({ count }) => ({ count: count + 1 }));
  };

  render() {
    return <Counter count={this.state.count} />;
  }
}

export default App;

 

 

지금은 App컴포넌트에서 state로 관리하는 count값을 변경할 수 있지만,

하위 컴포넌트인 Counter 컴포넌트에선 count를 변경시킬 수 없다.

(그저 props 로 count를 받아서 화면에 보이게만 할 수 있음)

 

 

App 컴포넌트에서 increaseCount()함수를 프로퍼티 형태로 전달하면 - Counter에서도 변경 가능!

 

 render() {
    return <Counter count={this.state.count} onAdd={this.increaseCount} />;
  }

이런식으로 props로 전달해주고, 하위 컴포넌트인 Counter에서는

 

 

Counter.jsx

import React from "react";
import PropTypes from "prop-types";

class Counter extends Component {
  render() {
    return (
      <div>
        현재 카운트: {this.props.count}
        <button onClick={() => this.props.onAdd()}>카운트 증가</button>
      </div>
    );
  }
}

Counter.propTypes = {
  count: PropTypes.number,
  onAdd: PropTypes.func,
};

export default Counter;

 

<button onClick={() => this.props.onAdd()}>카운트 증가</button>

이부분을 보면, onClick = {() => this.props.onAdd()}와 같이 콜백의 형태로 (arrow function) 작성해준다.

 

 

그러나, 이대로 버튼을 클릭하면 오류가 발생하는데,

이는 하위 컴포넌트에서 참조할 this의 범위에 대한 오류 때문이다.

 

상위->하위로 콜백함수를 props로 보내는 경우에는
하위 컴포넌트에서 참조할 this 범위를 bind()로 지정해줘야한다.

 

 

App.jsx 수정

import React from 'react';
import Counter from "./Counter";

class App extends Component {
   constructor(props) {
      super(props);
      this.increateCount = this.increateCount.bind(this);
      }
      
  	state = {
    count: 1,
  	};

  increaseCount = () => {
    this.setState(({ count }) => ({ count: count + 1 }));
  };

  render() {
    return <Counter count={this.state.count} />;
  }
}

export default App;

 

 

 

- 컴포넌트에서 window.addEventListner() 함수와 같은 DOM객체 함수를 이용하려면

DOM객체를 컴포넌트 변수에 할당해야함.

 

>> ref를 사용하자.

 

 

import React from "react";

export default class ScrollSpy extends React.PureComponent {
  constructor(props) {
    super(props);
    this.setRef = this.setRef.bind(this);
    this.checkPosition = this.checkPosition.bind(this);
    window.addEventListener("scroll", this.checkPosition);
  }

  setRef(ref) {
    this.ref = ref;
  }

  checkPosition() {
    if (this.ref.getBoundingClientRect().top < window.innerHeight) {
      console.log("enter");   // 현재 스크롤 화면 안팎인지 측정
    } else {
      console.log("exit");
    }
  }

  componentDidMount() {
    this.checkPosition();
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.checkPosition);
  }

  render() {
    return <div ref={this.setRef} />;
  }
}

 

- 윈도우의 스크롤 이동 이벤트시 >> checkPosition 실행

- ref 프로퍼티에서 반환된 객체를 this.ref 변수에 할당.

 

return <div ref={this.setRef} />로

this.setRef의 인자로 해당 DOM객체가 전달되고, this.ref (컴포넌트 변수)에 해당 객체를 할당해줌.

 

 

props로 전달된 콜백함수는

onClick = {this.resetCount} 와 같이 사용 가능.

 

---

 

정리

리액트 컴포넌트는? 단방향 흐름 방식

state와 같은 데이터를 상위->하위로 전달. (props)

 

🙋‍♂️ props를 변경하려면?

 

콜백함수를 호출하여 원본 데이터가 위치한 상위 컴포넌트에서 데이터를 변경하고

다시 자식 컴포넌트로 전달하도록 함.

 

단방향 흐름 방식 - 데이터 무결성 지켜줌.

데이터 수정으로 인한 데이터의 파편화를 줄여줌.