[REACT] component / state / useEffect

import Button from"./Button";
import styles from "./App.module.css"
import {useState} from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev+1);
  return (
    <div>
      <h1> {counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
    
  );
}
export default App;

state 사용 후

value 받아오고, value 수정을 위해 function을 받아옴.

previous state를 받아 +1 한 값을 return하는 function 생성한 후에 그 값을 h1을 통해 보여줌

그리고 button 태그에 onClick 사용, state를 modify할 수 있는 버튼 생성  

 

state가 변화할 때 모든 component는 다시 실행되고 모든 코드가 재 실행.

업데이트된 값을 볼 수 있는 이유이기도 함. 

 

 // 그렇다면 첫번째로 render할 때만 코드를 실행하려면?

  // 즉, 다른 state 변화에는 실행되지 않도록 하는 것. how?

만약 api 사용 시, 첫번째 component render에서 api call하고 이후에 state 변화한 후

api에서 데이터를 또 가져오고 싶진 않을 것임. 불필요함. 

그렇다면 어떻게 특정 코드들이 첫번째 component render에만 실행되게 하는가?

 

-> useEffect

import Button from"./Button";
import styles from "./App.module.css"
import {useState, useEffect} from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev+1);
  console.log("run all the time"); 
  useEffect( ()=> {
    console.log("CALL THE API");
  }, []);
  return (
    <div>
      <h1> {counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
    
  );
}
export default App;

 

Deps

  // input에 이벤트 리스너로 들어가는 function

  //onChange function이 작돌할 때 argument로 event 받음

  //이후 event를 발생시킨 input에서 value를 받아서 그 value를 keyword state에 넣음

  //그리고 그 keyword를 가져와 input의 value로 사용

  //원할 때 input 조작 가능

타이핑 할 때마다 state modify

 

여기서 우리가 useEffect를 사용해야 하는 이유를 다시한번 알 수 있다.

만약 사용자가 글자 입력할 때마다 api를 새로 호출하는 것은 너무나도 불필요한 작업.

따라서 useEffect를 사용해야 한다. 

 

코드의 특정 부분만이 변화했을 때, 원하는 코드만 실행시키는 방법 

 

useEffect 두개의 컴포넌트 가짐
첫번째: 우리가 딱 한번만 실행하고 싶은 코드
두번째: 변화 대상 

import Button from"./Button";
import styles from "./App.module.css"
import {useState, useEffect} from "react";

function App() {
  // 첫번째 아이템: value, 두번째 아이템: 그 value를 modify하는 function
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");

  const onClick = () => setValue((prev) => prev+1);
  // input에 이벤트 리스너로 들어가는 function 
  //onChange function이 작돌할 때 argument로 event 받음 
  //이후 event를 발생시킨 input에서 value를 받아서 그 value를 keyword state에 넣음 
  //그리고 그 keyword를 가져와 input의 value로 사용 
  //원할 때 input 조작 가능 
  const onChange= (event) => setKeyword(event.target.value);

  useEffect( ()=> {
    console.log("run only once");
  }, []);

  // 키워드가 있을 때만 검색하게 하고 싶다면?
  useEffect(()=> {
    console.log("run when 'keyword' changes");
  }, [keyword]);
  //keyword가 변화할 때 코드 실행할 것을 react.js에게 알려주는 것

  useEffect(()=> {
    console.log("run when 'counter' changes");
  }, [counter]);

  useEffect(()=> {
    console.log("run when 'counter' & 'keyword' changes");
  }, [counter]);
  
  return (
    <div>
      <input 
      value={keyword} 
      onChange={onChange} 
      type="text" 
      placeholder="Search here..."/>
      <h1> {counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
    
  );
}
export default App;

 

 

*useState 여러번 사용하기

import { useState } from "react"

const Say = () => {

    const [messeage, setMessage] = useState('');

    const onClickEnter = () => setMessage('안녕하세요!');

    const onClickLeave = () => setMessage('안녕히가세요!');

    const [color, setColor] = useState('black');

    return (

        <div>

            <button onClick={onClickEnter}>입장</button>

            <button onClick={onClickLeave}>퇴장</button>

            <h1 style={{color}}> {messeage} </h1>

            <button

                style={{color : 'red'}}

                onClick={() => setColor('red')}>

                빨간색

            </button>

            <button style={{color : 'green'}} onClick={() => setColor('green')}>

                초록색

            </button>

            <button style={{color : 'blue'}} onClick={() => setColor('blue')}>

                파란색

            </button>

        </div>

    );

};

export default Say;