React-hooks기본 사용법 -프론트엔드개발

1. useState

- useState 는 state(상태)를 업데이트 해주는 함수형 컴포넌트

 

import React, { useState } from 'react'; //useState를 임포트해서 불러옴

const Counter = () => {
  const [value, setValue] = useState(0); //초기값 0 setValue를 통해서 value값을 변환
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b> 입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button> //1증가 버튼
      <button onClick={() => setValue(value - 1)}>-1</button>//1감소 버튼
    </div>
  );
};

 

2.useEffect

- 컴포넌트가 렌더링 될 때마다 특정 작업을 할수 있도록 설정 하는 Hook 입니다. 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태로 보아도 무방합니다.

 

useEffect(() => {
    console.log('');
  }, []); //처음 렌더링 될 때만 실행

 

useEffect(() => {
    console.log(name); 
  }, [name]); //name 값이 변할 때마다 동작

 

useEffect(() => {
    return => () //component가 unmount 됐을 때 이 작업 수행
  }, []); //

 

3. useContext

이 Hook 을 사용하면 함수형 컴포넌트에서 Context 를 보다 더 쉽게 사용 할 수 있습니다. useContext를 사용하는 이유는 props를 글로벌하게 사용할 수 있게 해주기 때문입니다. 부모에서 자식으로 2중 3중으로 props를 넘기다 보면 코드도 복잡해지고 가독성도 떨어져서 useContext를 사용해서 어느 컴포넌트에서든 사용할 수 있게 할 수 있습니다.

src 디렉터리에 ContextSample.js 이라는 컴포넌트를 만들어보세요.

ContextSample.js

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('black');
const ContextSample = () => {
  const theme = useContext(ThemeContext);
  const style = {
    width: '24px',
    height: '24px',
    background: theme
  };
  return <div style={style} />;
};

export default ContextSample;

다 만드셨으면 App 컴포넌트에서 렌더링도 해주세요.

App.js

import React from 'react';
import ContextSample from './ContextSample';

const App = () => {
  return <ContextSample />;
};

export default App;

아래 그림처럼 보입니다. 지금은 app.js에서만 임포트해서 불러왔지만 필요한 컴포넌트 어디에서도 불러와서 사용이 가능합니다.

3. useMemo

기본적으로 react는 부모 component로부터 받는 state,props가 변동될 경우 rerendering됩니다. 당연한 것이죠. 하지만 여기에는 분명한 문제가 존재합니다.

state1, state2, state3이 존재하는데 state1만 변경 했는데 state2, state3도 같이 리렌더링 된다면 이건 비효율적 입니다.

이럴때 사용한게 useMemo 입니다.

 

//App.js

import React, { useState } from "react";
import ShowState from "./ShowState";

const App = () => {
  const [number, setNumber] = useState(0);
  const [text, setText] = useState("");

  const increaseNumber = () => {
    setNumber((prevState) => prevState + 1);
  };

  const decreaseNumber = () => {
    setNumber((prevState) => prevState - 1);
  };

  const onChangeTextHandler=(e)=>{
    setText(e.target.value);
  }

  return (
    <div className="App">
      <div>
        <button onClick={increaseNumber}>+</button>
        <button onClick={decreaseNumber}>-</button>
        <input
          type="text"
          placeholder="Last Name"
          onChange={onChangeTextHandler}
        />
      </div>
      <ShowState number={number} text={text} />
    </div>
  );
};

export default App;

간단하게 숫자를 증가시키고 감소시키는 컴포넌트 입니다. app.js 에서 showstate.js로 number과 text를 보냅니다.

//ShowState.js

import React from "react";
import "./styles.css";

const getNumber = (number) => {
  console.log("숫자가 변동되었습니다.");
  return number;
};

const getText = (text) => {
  console.log("글자가 변동되었습니다.");
  return text;
};

const ShowState = ({ number, text }) => {
  const showNumber = getNumber(number);
  const showText = getText(text);

  return (
    <div className="info-wrapper">
      {showNumber} <br />
      {showText}
    </div>
  );
};

export default ShowState;

이런 상태로 버튼을 눌러서 숫자를 변경하면 console.log가 2개가 찍힙니다.("숫자가 변동되었습니다." / "글자가 변동되었습니다.")  숫자만 변경했는데 이렇게 동작하는 것은 안 좋은 렌더링 입니다. 이것을 없애기 위해서 useMemo를 활용해 보겠습니다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

위에느 react 공식홈페이지에 나와있는 useMemo 사용법 입니다.여기서 우리가 memoization 할 값은 showNumber과 showText임으로 그대로 적용시켜주겠습니다.

//ShowState.js

import React,{useMemo} from "react";
import "./styles.css";

const getNumber = (number) => {
  console.log("숫자가 변동되었습니다.");
  return number;
};

const getText = (text) => {
  console.log("글자가 변동되었습니다.");
  return text;
};

const ShowState = ({ number, text }) => {
  const showNumber = useMemo(()=>getNumber(number),[number]);
  const showText = useMemo(()=>getText(text),[text]);

  return (
    <div className="info-wrapper">
      {showNumber} <br />
      {showText}
    </div>
  );
};

export default ShowState;

이렇게 바꾸면 숫자가 변경되면 "숫자가 변동되었습니다." console.log만 찍히고 글자가 변경되면 "글자가 변동되었습니다."console.log가 찍힙니다.