라이프사이클

컴포넌트가 로딩되기 시작하는 Mounting

constructor 클래스 생성자

이것은 어찌보면 당연합니다. 어떤 클래스를 만들더라도 생성자보다 더 빨리 샐행되는 로직은 없기 때문입니다. 하지만 지금의 리액트에서는 생성자를 건드릴 일이 거의 없어졌기 때문에 가볍게 넘어가도록 하겠습니다. 아직 클래스 인스턴스가 막 실행된 시점이기 때문에 이 시점에는 브라우저에서 우리가 작성한 JSX가 보이지 않습니다.

실제 로딩이 이루어지는 render

constructor메소드가 실행된 이후에는 render 메소드가 실행됩니다. render메소드는 메소드 이름 자체로 어떤 일을 하는지 나타내고 있습니다. 이 메소드가 실행되면서 JSX가 HTML로 변환되어 우리가 보는 웹 브라우저에 나타나게 됩니다. 그러나 한가지 명심해야 할 점은, render메소드는 컴포넌트가 로딩될 때에도 실행되지만 컴포넌트의 데이터 (state, props)가 업데이트 되었을 때에도 동작한다는 점 입니다. 그렇기 때문에, render 메소드에서 setState나 props를 변화시키는 메소드를 가능하면 수행하지 않는 것을 추천합니다. (잘못하면 무한루프가 일어나게 되겠죠?)

처음 로딩이 끝난 뒤에 수행되는 componentDidMount

mounting의 마지막 부분입니다. render 메소드에 있는 모든 부분들이 브라우저에 나타나게 되었을 때만 실행되는 메소드 입니다. 컴포넌트의 데이터가 업데이트 되어도 이 메소드는 다시 수행되지 않습니다. 오직 초기 컴포넌트의 로딩 이후에 한번만 실행되는 라이프사이클 메소드 입니다. 이제 여기서 DOM을 직접 조작할 수 있게 됩니다. (하지만 리액트는 DOM조작을 직접 하지 않고도 많은 일을 할 수 있습니다.)

컴포넌트의 업데이트 Updating

리액트는 컴포넌트의 업데이트 감지를 오직 현재 컴포넌트에서 state나 props의 변경 유무로만 판단합니다.

state, props의 변경

위 그림에는 forceUpdate라고 해서 메소드가 하나 더 있는데요, 이는 강제로 재 렌더링을 하게 끔 도와주는 메소드 입니다. (하지만 코딩애플 강의에서는 다루지 않을게요.) 만약 우리가 setState를 이용해서 state를 하나 업데이트 했다고 가정해 봅시다. 그러면 다음에는 어떤 메소드가 수행될까요?

데이터가 변경이 되었으니 다시 render를 해야지 !

state의 변경이 일어났습니다. 리액트는 효율적으로 state의 변경사항을 감지해 다시 변경된 부분을 그려줍니다.

변경이 완료된 이후 수행되는 componentDidUpdate

컴포넌트의 변경이 완료되었을 때에 수행되는 메소드 입니다. 이 메소드는 조금 복잡한 작업을 수행하기에 최적화 되어있는 메소드 인데요, render메소드가 실행되어 업데이트 된 state, props와 업데이트 되기 전인 state, props를 가지고 비교 작업을 가능하게 해 줍니다.

컴포넌트의 삭제 Unmounting

컴포넌트에게 안녕을, componentWillUnmount

컴포넌트가 사라질 때에 수행되는 메소드 입니다. 여기서는 우리가 컴포넌트 내에 할당해 놓았던 여러가지 변수들을 해제시켜줄 수 있습니다. (setInterval, eventListener 같은 것들)

react hooks

React Hooks란?

React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이,
state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리

React Hook의 필요성

함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다.
함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로
서로의 장점을 전부다 가지고 있다.

React에서 기본적으로 지원하는 Hooks

1. useState

컴포넌트의 state(상태)를 관리 할 수 있다.

2. useEffect

어떤 변수가 변경될때마다, 특정기능이 작동하도록 할 수 있다.

3. useContext

여러개의 컴포넌트에서 사용할 수 있는, 변수 or 함수를 만들 수 있다. ( 전역으로 관리 )

4. useReducer

state(상태) 업데이트 로직을 reducer 함수에 따로 분리 할 수 있다.

5. useRef

컴포넌트나 HTML 요소를 래퍼런스로 관리할 수 있다.

6. useImperativeHandle

useRef로 만든 래퍼런스를 상위 컴포넌트로 전달할 수 있다.

7. useMemo, useCallback

의존성 배열에 적힌 값이 변할 때만 값,함수를 다시 정의할 수 있다.

8. useLayoutEffect

모든 DOM 변경 후 브라우저가 화면을 그리기(render)전에 실행되는 기능을 정할 수 있다.

9. useDebugValue

사용자 정의 Hook의 디버깅을 도와준다.

useState 사용법

state란?

React에서 사용자의 반응에 따라, 화면을 바꿔주기(렌더링) 위해 사용되는 트리거역할
state가 변경되면, React가 이를 감지하고 바뀐 정보에 따른 화면을 표시해준다.

state 만들기

// React에 기본적으로 내장되어 있는 useState 훅을 사용하면, state를 만들 수 있다.

import { useState } from "react";

// const [state, state변경함수] = useState(기본 state값);

const [isLoggedIn, setIsLoggedIn] = useState(false);
 

state 변경하기 ( 사용자 반응에 따른 다른 화면 보여주기 )
// 전에 만든 "isLoggedIn" state의 값을 true로 변경한다.

setIsLoggedIn(true);

// ** useState함수를 사용해 만든 "state 변경 함수"를 사용하여야 한다.

state의 특징

state는 어디에서든지 사용가능하다.
하지만 컴포넌트는 시간이 지나고, 앱이 커질수록 점점 많아지므로
점점 관리가 어려워지는 단점이 있다

useEffect 사용법

// React에 기본적으로 내장되어 있는 useState와, useEffect 불러오기

import { setState, useEffect } from "react";

...

function App() {
  const [data, changeData] = setState(false)
  
  // useEffect(실행할 함수, 트리거가 될 변수)
  
  useEffect(() => {
    if (data.me === null) {
      console.log("Data changed!")
    }
  }, [data]);  
  
  // data변수가 바뀔때마다, react가 이를 감지해, 콘솔창에 "Data changed!" 출력
  
  return (
    <div>
      <button value="적용" onClick={changeData(!data)} />
    </div>
  )
}

export default App;

useContext 사용법

새로운 context 만들기

// newContext.js

import { createContext } from "react"  // createContext 함수 불러오기

// context안에 homeText란 변수를 만들고, 공백("") 문자를 저장한다.
const newContext = createContext({
  homeText: "",
})
 

context를 사용할 부분 선택하기, 새로운 정보 저장하기

// App.js

import React from "react";
import { View } from "react-native";
import Home from "./Home"; // 자식 컴포넌트 불러오기

import { newContext } from "./newContext"; // context 불러오기


export default function App() {

  // context에 저장할 정보를 입력한다.
  const homeText = "is Worked!"

  // NewContext.Provider로 우리가 만든 context를 사용할 부분을 감싸준다.
  return (
        <newContext.Provider value={{ homeText }}>
          <View>
            <Home />
          </View>
        </newContext.Provider>
  );
}

context 사용하기

// Home.js

import React from "react";
import { Text, View } from "react-native";

import { useContext } from "react";
import { newContext } from "../newContext";


export default function Home() {

  // useContext hook 사용해서, newContext에 저장된 정보 가져오기
  const { homeText } = useContext(newContext);
  
  // 불러온 정보 사용하기!!
  return (
    <View>
      <Text>{homeText}<Text>
    </View>
  );
}

context 사용시 좋은점

React에서 context 없이 변수나 함수를 다른 컴포넌트로 전달하려면
부모자식간에만 전달이 가능하므로,
컴포넌트가 많아질수록 불필요한 컴포넌트를 많이 거쳐야하는 문제가 발생한다! ( A -> B -> C -> D )
context를 이용하면, 중간과정을 재치고 직통으로 전달할 수 있다! ( A -> D )

context 사용시 유의점

전달하고자하는 컴포넌트에 context를 만들면, 불필요한 호출이 추가될 수 있으므로,
context 전용 파일을 만들어야 한다.

예시 조건 )
컴포넌트 : A, B, C, D ( A가 최상위 컴포넌트 )
전달 : A -> D
A 컴포넌트에 context 생성
D 컴포넌트에서 context 불러옴

실행 과정 )
1. A가 렌더링되며, B, C, D를 차례로 불러옴
2. D에서 context를 가져오기위해 A를 다시불러옴
3. A를 다시 불러오면서, 불필요한 중복이 발생함

여러가지 React Hooks 라이브러리

1. react-hook-form