변수와 state

변수와 다르게 state는 값이 변경될때 자동으로 관련된 HTML을 재렌더링되게 만들고 싶으면 state에 저장해서 데이터 바인딩을 처리해야한다.

변수와 state 예시

• App.js

import react, { useState, useMemo, useCallback } from "react";
import MyComponent from "./components/MyComponent";

export default function App() {
  let text1 = '안녕하세요'
  let [text2 , setText2] = useState('안녕하세요')
  const Kor = ()=>{
    text1 = '안녕하세요'
    setText2('안녕하세요')
  }
  const Eng = ()=>{
    text1 = 'hi'
    setText2('hi')
  }

  return <div className="App">
    <button onClick={Kor}>한글 이벤트 발생 버튼</button>
    <button onClick={Eng}>영어 이벤트 발생 버튼</button>
    <span>{text1}</span>
    <span>{text2}</span>
  </div>
}

변수를 사용한 text1과 state를 사용한 text2를 비교하면
버튼을 눌렀을 때 text1은 브라우저에서 변화를 감지하지않으나
text2는 데이터 바인딩을 통해 변화를 감지하여 처리한다.

• node_modules 안에 있는 폴더들은 따로 경로 설정 할 필요가 없다.

useEffect

사용 방법

useEffect(() => {});

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

const [name, setName] = useState();
useEffect(() => {}, [name] );

위와 같이 총 3가지이다.

1. Dependency가 없어서 렌더링할때 불필요하게 많이 작동하여 거의 사용X
2. 렌더링 후 단 한번만 실행하고 싶을 때 실행한다.
   배열에 영향을 받아 배열안의 값이 바뀌면 영향을 받는데 배열이 빈배열이므로 바뀌어도 영향을 못 주기 때문에 한번만 실행한다.
3. 렌더링 1번 + 배열 안의 변수의 값이 변할 때 실행하는 코드

useEffect 예시

import react, { useState, useMemo, useCallback  , useEffect } from "react";
import User from './components/Box/index.js'

import MyComponent from "./components/MyComponent";
let count = 0
export default function App() {
  const [number, setNumber] = useState(0);
  const [name ,setName] = useState('josh')

  console.log('나는 렌더링 시 언제나 나와')

  useEffect(()=>{
    console.log('Hello')
  },[name])

  const counter = () =>setNumber(number + 1)
  const nameChanger = () =>setName('Mike'===name ? 'josh' : 'Mike')

  return <div className="App">
    <button onClick={counter}>click</button>
    <button onClick={nameChanger}>change Name</button>
    <button>No rendering</button>
    <div>{number}</div>
    <div>{name}</div>
  </div>
}

click 버튼 : 나는 렌더링 시 언제나 나와만 출력
change Name 버튼 : 나는 렌더링 시 언제나 나와 + Hello 출력
No rendering 버튼 : 아무 콘솔도 안나온다.

• 첫번째 콘솔은 브라우저가 렌더링 될 때 실행된다.
• 두번째 콘솔은 name에 영향을 받아 name이 바뀔 때 만 출력을 시켜준다.