[React 4.] #24~33

홍민기·2022년 6월 26일
0

React

목록 보기
4/7

#24. state 사용하기

props를 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용했다면, state는 하나의 컴포넌트 안에서 전역 변수처럼 사용한다. 가장 먼저 실행되는 생성자 함수 constructor 안에서 state 변수의 초기값을 정의해줄 수 있다.

#25. setState() 함수 사용하기

this.state.변수명 = value와 같이 state를 직접 변경하면 render() 함수를 호출하지 않는다. 따라서 setState() 함수로 state를 변경해야 render() 함수를 호출해 변경된 값을 화면에 보여줄 수 있다.

#26. state를 직접 변경한 후 forceUpdate() 함수 사용하기

this.state.변수명 = value와 같이 state를 직접 변경하면 render() 함수를 호출하지 않는다. 이때 forceUpdate() 함수로 화면을 새로고침하면, render() 함수를 호출해 변경된 값을 화면에 보여줄 수 있다.

#27. Component 사용하기(class형 컴포넌트)

class형 컴포넌트에는 Component와 PureComponent가 있다. 두 컴포넌트 모두 props와 state의 변경에 따라 render() 함수를 호출하는데, 변경에 대한 기준이 다르다. Component에서는 비교 대상이 완전히 동일하지 않으면 변경이 발생했다고 본다.


이 문제에서 문자열 변경 버튼을 클릭하면, line 7에서 선언한 문자열 변수와 동일한 state값을 setState() 함수로 선언 및 초기화한다. 이때 컴포넌트는 state 값이 변경됐다고 간주해 render() 함수를 실행한다.
객체 배열 변경 버튼을 클릭하면, line 8에서 선언한 배열 변수와 동일한 state값을 setState() 함수로 선언 및 초기화한다. 이때 컴포넌트는 state 값이 변경됐다고 간주해 render() 함수를 실행한다.

⭐️ setState() 함수로 실행한 값은 이전에 있던 state 변수값과 동일하더라도 Component에서는 새로운 state 변수가 같은 이름으로 생성됐다고 인식한다.


#28. PureComponent 사용하기(class형 컴포넌트)

PureComponent에서는 비교 대상의 값을 비교해 동일하지 않으면 변경이 발생했다고 본다. 불필요한 render() 함수의 실행을 줄이면 페이지 성능을 향상시킬 수 있다.


만약 문자열 변경 버튼을 클릭하면 컴포넌트가 state 값이 동일하다고 간주해 render() 함수를 실행하지 않는다. PureComponent에서는 새로운 state변수가 선언됐지만, 변수값만 비교한다.
만약 객체 배열 변경 버튼을 클릭하면, 컴포넌트는 state 값이 변경됐다고 간주해 render() 함수를 실행한다. PureComponent는 예외적으로 객체에 대해서는 참조 값을 비교한다. line 16에서 생성한 객체와 데이터는 같지만, 참조 값이 달라 다른 객체로 인식한다.


#29. shallow-equal 사용하기(class형 컴포넌트)

shallow-equal 패키지는 PureComponent에서 state 값의 변경을 비교하는 것과 동일한 기능을 하는 함수를 제공한다. shallowEqualArrays() 함수는 두 배열을 비교하고 동일하면 true를 반환한다.
shouldComponentUpdate() 함수는 변경된 props와 state 값을 파라미터로 받을 수 있고 반환 값이 true일 때 render() 함수를 실행시킨다.

⭐️ Component 클래스에서도 shouldComponentUpdate(), shallowEqualArrays() 함수를 사용하면, PureComponent 클래스처럼 값만 비교해 render() 함수를 실행시킬 수 있다.


#30. 함수형 컴포넌트 사용하기

함수형 컴포넌트는 클래스형 컴포넌트와 달리, state가 없고 생명주기 함수를 사용할 수 없다. 상위 컴포넌트에서 props와 context를 파라미터로 전달받아 사용하고 render() 함수가 없으므로 return만 사용해 화면을 그려준다.

함수형 컴포넌트는 return 값이 있는 function과 동일한 구조를 갖는다.
상위 컴포넌트에서 전달받은 props를 지역 변수에 할당한다. 클래스형 컴포넌트와는 달리, props 앞에 this가 붙지 않는다.


#31. hook 사용하기

함수형 컴포넌트에서 클래스형 컴포넌트와 같이 state와 생명주기 함수와 같은 기능을 사용하기 위해 hook을 이용한다. 대표적인 hook 함수에는 useState()와 useEffect()가 있다.

useState() 함수로 state 변수값을 선언 및 할당한다. 이때 두 가지 인자가 선언된 배열이 반환된다. 첫 번째 인자 contents는 state 변수명, 두 번째 인자 setContents는 state 변수값을 변경해주는 함수이다.
useEffect() 함수는 생명주기 함수 componentDidMount()와 같이 return 되는 html 코드들이 화면에 그려진 이후에 실행된다. 최초 페이지가 로딩될 때 한 번 실행되고 setContents() 함수로 state 값이 변경되면 한 번 더 실행된다.


#32. Fragments 사용하기

컴포넌트 단위로 element를 return 할 때 하나의 html 태그로 전체를 감싸지 않으면 에러가 발생한다. 이때 Fragment 태그로 감싸면 불필요한 html 태그를 추가하지 않고 사용할 수 있다.

#33. map()으로 element 반환하기

반복해서 출력해야 하는 element들을 배열에 넣어두고 map() 함수로 순서대로 나열해 컴포넌트를 return할 수 있다.
[출처 : 초보자를 위한 리액트 200제(정보문화사)]
profile
안녕 :P

0개의 댓글