React 기초 개념 정리(렌더링 조건, 비동기/동기)

리액트 프로젝트를 할 때 그리고 JS를 공부할 때 기본적으로 알면 좋은 기초 개념을 정리하고자 한다. 이전에는 동기 프로그래밍에 익숙해졌다가 비동기에 익숙해지려 하니 헷갈려서 머리 속 정리가 필요하다.

1.  aync await (비동기/동기) 

JS에서 비동기 프로그래밍 방식은 대표적으로 Promise, Callback, aync await가 있다. 여기서 aync await 방식을 자주 썼어서 개념을 정리하고자 한다. 

비동기의 의미는 어떤 특정한 코드의 실행처리가 완료될 때 까지 기다리는 것이 아닌 그 다음 코드를 먼저 실행하는 것을 의미한다. 즉, 병행처리를 한다는 것이다. 처리하는데 시간이 걸리는 코드를 쓸 때 비동기를 사용한다. 대표적인 예로 API를 불러올 때가 있다.

*await은 async 함수 내에서만 동작한다. 

아래는 참고 예시이다. function 앞에 async를 안쓰면 에러가 날 것이다.

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

* await은 최상위 레벨 코드에서 작동하지 않는다.

// 최상위 레벨 코드에선 문법 에러가 발생함
let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();

나머지 비동기 처리 방식 부분은 이후 다음글에 비동기 프로그래밍 방식으로 따로 글을 써볼 예정이다.

2. state, setState, useState

state는 변수로, var, const, let과 다르다. 왜 사용할까 그럼? state는 일반 변수와 다르게 값이 변하면 렌더링이 일어난다. 값이 변하게 되면 연관있는 컴포넌트들이 다시 렌더링이되어 화면이 바뀌게 된다.

setState은 state 값을 바꾸는 함수이고 아래와 같이 초기화 및 선언을 한다.

const [state, setState] = useState(초기값);
//ex)
const [loading, setLoading] = useState(true);

state는 변수, setState는 state를 변경시켜주는 함수, useState는 state, setState를 return 하면서 초기값을 설정해주는 hook다.

처음에는 state를 일반 변수처럼 마구잡이로 써서 원하는 UI가 내가 생각한 로직대로 흘러가지 않았다. 공부하다가 알게 된 state 사용 기준은 자주 변하고 저장해야할 필요성이 있으며 화면에 업데이트를 해야한다면(보여주는 것) state를 사용한다.

setState는 비동기이다.

**setState을 사용하고 바로 다음 줄에 state를 출력하면 이전 값이 출력된다. 이는 setState가 비동기 이기 때문이다.

즉, React는 setState를 킵해뒀다가 다른 기타 코드들을 처리하고 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트하게 된다. state는 값이 변경되면 리렌더링이 발생한다. 그런데 변경되는 state가 많을 경우 리렌더링이 계속 일어날테고 속도도 저하될것이다.
따라서 변경된 값들을 모아 한번에 업데이트를 진행하여 렌더링을 줄이고자 배치(Batch) 기능을 사용해 비동기로 작동한다고 볼 수 있다. 배치 업데이트는 16ms 주기이다.

3. useEffect

컴포넌트가 렌더링 될 때, 특정 작업을 실행할 수 있는 hook이다.  렌더링, 변수의 값 이나 오브젝트가 변하면(렌더링 됨), 이를 인지하고 업데이트를 해주는 함수이다.

1) 페이지가 처음 렌더링 되고 난 후, 무조건 한 번은 실행된다.

2) useEffect에 배열로 지정한 useState의 값이 변경되면 실행된다.

아래는 page가 바뀔 때 마다 getItems 함수를 호출하는 코드이다.

useEffect(() => {
	getItems();
},[page])

const [page, setPage] = useState(1);
//1
useEffect(() => {console.log('hi')});
//2
useEffect(() => {console.log('hi')}), []);

const [page, setPage] = useState(1);
//3
useEffect(() => {console.log('hi')}),[page]);

1번은 Depencdency가 없어서 렌더링 할 때 한 번, 작은 요소라도 변화하면 그 때마다 useEffect가 실행되버린다.

2번은 처음 렌더링 후, useEffect를 한 번만!! 실행하고 싶을 때 사용하는 방법이다. 단 한 번만 실행되고 다시는 실행이 되지 않는다.

3번은 useEffect를 렌더링 후 한 번, 배열 안 변수 값이 변할 때 마다 실행하는 코드이다.

4. props

상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. 우리는 컴포넌트를 한 번만 사용하지 않고 여러번 재활용할 수 있기 때문에 참 유용하다. props은 여러개 값으로 전달 할 수 있다. ex) name="꼬북이" message="거북이"

아래는 예시 코드이다.

App.js - 부모 컴포넌트

import React, { Component } from 'react';
import Main from './component/Main';

function App() {
  return (
    <div>
      <Main name="꼬북이"/>
    </div>
  );
}

export default App;

Main.js - 자식 컴포넌트

import React from 'react';

function Main(props) {
    return (
        <div>
            <main>
                <h1>안녕하세요. {props.name} 입니다.</h1>
            </main>
        </div>
    );
}

export default Main;

5. 리렌더링 조건

위의 글로 보았을 때, React에서 리렌더링이 되는 조건을 정리해보자.

- state 변경이 있을 때

- 새로운 props이 들어올 때 -> 전달받은 props 값이 업데이트 됨

- 부모 컴포넌트가 렌더링 될 때 -> 자식 컴포넌트들도 역시 렌더링이 됨.

 

참고자료

async와 await

 

[Legacy][React] state, setState, useState 란 무엇일까?

React hooks 리액트 훅 useEffect란?

 

[React] 4. React 컴포넌트(2) - 프로퍼티(props)란?