React 예제풀이 #02 useEffect를 사용한 특정 조건에 따른 결과값 출력하기

이번에는  useEffect 를 이용해 특정 조건에 따른 결과값 출력을 해보겠습니다~

 

 

 

 

 

 

 

 

 

useEffect는 React Hook으로, 함수 컴포넌트에서 부수 효과(side effects)를 수행할 수 있도록 해줍니다. 부수 효과란 컴포넌트 내에서 상태를 변경하거나 외부 데이터를 가져오는 등의 작업을 말합니다.

 

 

 

 

 

 

useEffect는 다음과 같은 시나리오에서 유용하게 사용됩니다:

1. 렌더링 이후 작업 실행: 컴포넌트가 렌더링된 후 특정 작업을 수행해야 하는 경우에 사용됩니다. 예를 들어, 데이터를 가져오거나 DOM 요소에 접근하는 등의 작업이 이에 해당합니다.
2. 의존성 변경 감지: 특정 상태나 프로퍼티의 값이 변경될 때마다 작업을 수행해야 하는 경우에 사용됩니다. useEffect의 두 번째 매개변수로 의존성 배열(dependency array)을 전달하여 이를 구현할 수 있습니다.
3. 컴포넌트 언마운트 시 정리 작업: 컴포넌트가 언마운트되거나 업데이트되기 전에 정리(clean-up) 작업이 필요한 경우에 사용됩니다. 이를 통해 메모리 누수(memory leak)를 방지할 수 있습니다.

 

 

 

useEffect(() => {
  // 부수 효과 작업
  return () => {
    // 정리 작업 (선택사항)
  };
}, [의존성 배열]);

 

 

위 코드에서 useEffect는 함수를 매개변수로 받으며, 해당 함수는 부수 효과 작업을 수행합니다. 두 번째 매개변수는 의존성 배열이며, 이 배열에 포함된 값들 중 하나라도 변경될 때마다 useEffect의 함수가 다시 실행됩니다. 부수 효과 함수가 반환하는 함수는 정리 작업을 수행하며, 컴포넌트가 언마운트되거나 업데이트되기 전에 호출됩니다.

 

 

---

 

 

 

 

 

 

이번 예제의 요구사항 입니다 

 

* 요구사항 – [일 열심히 함] 버튼을 계속 누르면 직급과 연봉 그리고 색상이 변경되도록 한다.

 

 

 

 

잘 보고 만들어보자

 

 

 

처음 알게된 정보인데 임포트를 이렇게 해도 되는구나

 

 

 

 

 

 

import React from "react";
import { useEffect, useState } from "react";

function App() {
  useEffect(() => {});

  return (
    <div className="App" style={{ backgroundColor: "red" }}>
      <button></button>
    </div>
  );
}

export default App;

 

 

일단 이렇게  초기화면  코드를 적어준다 

 

npm start로 시작해보고 오류가 없다면 계속 ㄱㄱㄱㄱㄱ

 

import React from "react";
import { useEffect, useState } from "react";

function App() {
  const { point, setPoint } = useState(0);
  const btnWork = () => {};
  useEffect(() => {});

  return (
    <div className="App" style={{ backgroundColor: "red" }}>
      <button onClick={btnWork}>일 열심히 함 </button>
      <h1>
        당신의 직급은 신입사원 입니다 <br></br>
        연봉은 5000만원 입니다.
      </h1>
    </div>
  );
}

export default App;

 

 

실행화면 

 

좀 이상하다

 

css를 먹여주자

 

훨씬 낫다.

편안.

 

 

 

 

이어서 useEffect는 특정 값이 변경 될 때만 변경되는 기능으로 드디어 한번 써보겠슴다.

 

import React from "react";
import { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [point, setPoint] = useState(0);
  const [grade, setGrade] = useState("신입사원");
  const [salary, setSalary] = useState(5000);
  const [color, setColor] = useState("red");

  const btnWork = () => {
    setPoint(point + 200);

    console.log("일 잘하고 있음?  진급함 ㅋㅋ?");
    console.log("point", point);

    if (point > 1000) {
      setGrade("대리");
      setSalary(7000);
      setColor("blue");
    }

    if (point > 2000) {
      setGrade("과장");
      setSalary(10000);
      setColor("green");
    }

    if (point > 3000) {
      setGrade("부장");
      setSalary(15000);
      setColor("yellow");
    }
  };
  useEffect(() => {
    console.log("축하드립니다~!");
    if (grade === "과장") {
      console.log("과장으로 진급하셨습니다.");
      setColor("green");
    }
    if (grade === "부장") {
      console.log("부장으로 진급하셨습니다.");
      setColor("yellow");
    }
  }, [grade]);

  return (
    <div className="App" style={{ backgroundColor: `${color}` }}>
      <button onClick={btnWork}>일 열심히 함 </button>
      <h1>
        당신의 직급은 {grade} 입니다 <br></br>
        연봉은 {salary} 입니다.
      </h1>
    </div>
  );
}

export default App;

 

 

 

 

 

조금 길다 . 

 

 

 

 

1. useState 훅을 사용하여 상태 변수를 정의합니다. point, grade, salary, color 상태 변수를 정의하고 초기값을 설정합니다.
2. btnWork 함수는 버튼 클릭 시 호출됩니다. 이 함수는 point 상태를 200씩 증가시키고, 그에 따라 조건에 따라 grade, salary, color를 업데이트합니다.
3. useEffect 훅은 컴포넌트가 렌더링될 때마다 실행되며, grade 상태가 변경될 때마다도 실행됩니다. grade에 따라 콘솔에 메시지를 출력하고, color를 업데이트합니다.
4. JSX 내에서는 버튼 클릭 시 btnWork 함수가 호출되도록 이벤트 리스너를 등록하고, 현재 직급과 연봉을 보여주는 UI를 렌더링합니다.

 

 

 

 

 

 

 

 

 

실행화면을 확인해보자 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

정상적으로 잘 동작한다 ! 

콘솔에서 같은 값이 같이 출력되는경우 

 

index.js에 있는 <React.StrictMode></React.StrictMode>를 제거하면 한 번만 출력됨다

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 useEffect를 이용한 예제를 풀어보았습니다 

봐주셔서 감사합니다~