개발 공부 공간

[React] component Life Cycle / useEffect를 통한 component Life Cycle 제어

개발새발 — Sun, 1 Sep 2024 17:04:29 +0900

Component Life Cycle

리액트 컴포넌트의 라이프사이클은

Mount -> Update -> Unmout로 진행된다.

Mount : 컴포넌트가 최초에 렌더링 됨
Update : 컴포넌트가 리렌더링 됨
Unmount : 컴포넌트가 화면에서 제거 됨

useEffect를 통한 component Life Cycle 제어

useEffect : 두 번째 인수인 [] 배열의 값이 바뀌면, 첫 번째 매개변수의 함수를 호출

예)

  useEffect(() => {
    console.log(`count: ${count} / input ${input}`);
  }, [count, input]); // 의존성 배열, dependency array(deps)

예) 클릭을 홀수 번 할 때 없어지는 컴포넌트

App.jsx

import { useState, useEffect, useRef } from "react";
import "./App.css";
import Even from "./components/Even";

function App() {
  const [count, setCount] = useState(0);
  const isMount = useRef(false);

  // 1. 마운트 : 탄생
  useEffect(() => {
    console.log("App Mount");
  }, []);

  // 2. 업데이트 : 변화, 리렌더링
  useEffect(() => {
    if (!isMount.current) {
      isMount.current = true;
      return;
    }
    console.log("App Update");
    console.log("Update");
  }); // deps 생략하면, 리렌더링 시 매번 실행 됨

  const onClickButton = () => {
    setCount(count + 1); // setState는 비동기로 실행되기 때문에
    console.log(count); // count값이 바로 변하지 않음
  };

  return (
    <div className="App">
      <h1>Simple Counter {count}</h1>
      <button onClick={onClickButton}>클릭</button>
      <section>{count % 2 === 0 ? <Even /> : null}</section>
    </div>
  );
}

export default App;

Even.jsx

import { useEffect } from "react";

const Even = () => {
  useEffect(() => {
    console.log("Even Mount");
    return () => {
      // 3. 언마운트 : 제거
      // 클린업, 정리함수
      console.log("Even Unmount");
    };
  }, []);
  return <div>짝수입니다.</div>;
};

export default Even;

[React] component 기본 구조 / State Lifting

개발새발 — Sun, 1 Sep 2024 15:54:33 +0900

리액트의 데이터(state등)는 부모 component에서 자식 component로 내려간다.

만약 형제 component끼리 상태를 공유하고 싶으면?

=> 부모 component로 statef를 올린다. (= State Lifting)

예)

아래와 같은 app을 만들어보면

두 개의 자식 컴포넌트가 count값을 알아야 하기 때문에 부모 컴포넌트인 App으로 state lifting을 해야한다.

App.jsx

import { useState } from "react";
import "./App.css";
import Viewer from "./components/Viewer";
import Controller from "./components/Controller";

function App() {
  const [count, setCount] = useState(0); // State Lifting

  const onClickButton = (value) => {
    setCount(count + value);
  };

  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <section>
        <Viewer count={count} />
      </section>
      <section>
        <Controller onClickButton={onClickButton} />
      </section>
    </div>
  );
}

export default App;

Viewer.jsx

const Viewer = ({ count }) => {
  return (
    <div>
      <div>현재 카운트 :</div>
      <h1>{count}</h1>
    </div>
  );
};

export default Viewer;

Controller.jsx

const Controller = ({ onClickButton }) => {
  return (
    <div>
      <button
        onClick={() => {
          onClickButton(-1);
        }}
      >
        -1
      </button>
      <button
        onClick={() => {
          onClickButton(-10);
        }}
      >
        -10
      </button>
      <button
        onClick={() => {
          onClickButton(-100);
        }}
      >
        -100
      </button>
      <button
        onClick={() => {
          onClickButton(100);
        }}
      >
        +100
      </button>
      <button
        onClick={() => {
          onClickButton(10);
        }}
      >
        +10
      </button>
      <button
        onClick={() => {
          onClickButton(1);
        }}
      >
        +1
      </button>
    </div>
  );
};

export default Controller;

[React] useRef로 component 내에 reference객체 생성

개발새발 — Sun, 1 Sep 2024 10:26:28 +0900

useRef vs useState

useRef	useState
Reference 객체를 생성	State를 생성
컴포넌트 내부의 변수로 활용 가능	컴포넌트 내부의 변수로 활용 가능
값이 바뀌어도 컵포넌트 리렌더링 발생하지 않음	값이 바뀌면 컵포넌트 리렌더링 발생

사용 예)

input tag에 DOM 요소를 reference 객체에 저장하여 input값이 빈 경우 focus 호출

import { useState, useRef } from "react";

const Register = () => {
  const [input, setInput] = useState({
    name: "",
    birth: "",
    country: "",
    bio: "",
  });
  const countRef = useRef(0);
  const inputRef = useRef();
  console.log(input);

  // 통합 이벤트 핸들러
  const onChange = (e) => {
    countRef.current++;
    current++;
    console.log("countref current", countRef.current);
    console.log("current", current);
    setInput({
      ...input,
      [e.target.name]: e.target.value, // 대괄호를 쓰는 이유는 key로 사용 한다는 의미
    });
  };

  const onSubmit = () => {
    if (input.name === "") {
      console.log(inputRef.current); // <input name="name" placeholder="이름" value="">
      // 이름을 입력하면 DOM 요소 포커스
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <div>
        <input
          ref={inputRef} // input tag DOM 요소가 inputRef 오브젝트에 저장 됨
          name="name"
          value={input.name}
          onChange={onChange}
          placeholder={"이름"}
        />
      </div>
      <div>
        <input
          name="birth"
          value={input.birth}
          type="date"
          onChange={onChange}
        />
      </div>
      <div>
        <select name="country" value={input.country} onChange={onChange}>
          <option value=""></option>
          <option value="KR">한국</option>
          <option value="US">미국</option>
          <option value="UK">영국</option>
          <option value="CA">캐나다</option>
        </select>
      </div>
      <div>
        <textarea name="bio" value={input.bio} onChange={onChange} />
      </div>
      <button onClick={onSubmit}>제출</button>
    </div>
  );
};

export default Register;

파일내의(=컴포넌트의 외부에) let 변수와 userRef의 차이점은?

=> let의 경우 전역변수 처럼 하나의 컴포넌트가 여러개로 사용될 경우 let변수를 공유하게 됨.

=> userRef의 경우 같은 컴포넌트라도 각각이 useRef를 가지고 있음

[React] Comonent 리랜더링 조건 / State로 Component 상태 관리

개발새발 — Sun, 18 Aug 2024 15:52:09 +0900

리액트 컴포넌트는 아래 조건이 충족되면 Re-Rendering 된다.

1. 내 state 값이 변경 될 때

2. props 값이 변경 될 때

3. 부모 컴포넌트가 Re-Rendering 될 때

예) react의 useState hook을 이용하여 component의 상태를 관리

App Component에서

1) 버튼 클릭 시 on / off 상태 관리

2) 버튼 클릭 시 count 수 증가 상태 관리

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

function App() {
  // 컴보턴트 리렌더링 => 화면 바뀜
  const [count, setCount] = useState(0);
  const [light, setLight] = useState("OFF");
  return (
    <>
      <div>
        {light === "ON" ? (
          <h1 style={{ backgroundColor: "orange" }}>ON</h1>
        ) : (
          <h1 style={{ backgroundColor: "gray" }}>OFF</h1>
        )}
        <button
          onClick={() => {
            setLight(light === "ON" ? "OFF" : "ON");
          }}
        >
          {light === "ON" ? "끄기" : "켜기"}
        </button>
      </div>
      <div>
        <h1>{count}</h1>
        <button
          onClick={() => {
            setCount(count + 1);
          }}
        >
          +
        </button>
      </div>
    </>
  );
}

export default App;

위와 같이 구현하면 내 state 값이 변경 될 때 component가 Re-Rendering특성을 가지고 있기 때문에

count만 변경해도가 on/off가 Re-Rendering된다.

React Developer Tools를 크롬에 설치하여 확인해보면 count버튼을 눌러도 on/off쪽이 다시 렌더링 된다. => 매우 효율적

따라서 아래와 같이 component를 나눠서 구조를 재설계하면 비효율적인 랜더링을 피할 수 있다.

App Component

import "./App.css";

import Bulb from "./components/Bulb";
import Counter from "./components/Counter";

function App() {
  return (
    <>
      <Bulb />
      <Counter />
    </>
  );
}

export default App;

Bulb Component

import { useState } from "react";

const Bulb = () => {
  const [light, setLight] = useState("OFF");

  return (
    <div>
      {light === "ON" ? (
        <h1 style={{ backgroundColor: "orange" }}>ON</h1>
      ) : (
        <h1 style={{ backgroundColor: "gray" }}>OFF</h1>
      )}
      <button
        onClick={() => {
          setLight(light === "ON" ? "OFF" : "ON");
        }}
      >
        {light === "ON" ? "끄기" : "켜기"}
      </button>
    </div>
  );
};

export default Bulb;

Counter Component

import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        +
      </button>
    </div>
  );
};

export default Counter;

위와 같이 구현해 주면 각각 컴포넌트가 독립적으로 Re-Rendering 된다.

[React] Props를 통해 Component로 데이터 전달

개발새발 — Sun, 4 Aug 2024 11:34:43 +0900

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달 할 때 Props를 이용하면 된다.

React에서 데이터(Props)는 상위 컴포넌트에서 아래 컴포넌트로 흐른다.

Props를 전달하는 방법은 두 가지

1. 객체 형태로 전달

App.jsx

import "./App.css";
import Button from "./components/Button";

function App() {
  const buttonProps = {
    text: "메일",
    color: "red",
  };

  return (
    <>
      <Button {...buttonProps} />
      <Button text={"카페"} color="blue" />
    </>
  );
}

export default App;

Button.jsx

const Button = (props) => {
  console.log(props); // {text: '메일', color: 'red'}
  return (
    <button style={{ color: props.color }}>
      {props.text} - {props.color?.toUpperCase()}
    </button>
  );
};

Button.defaultProps = {
  color: "black",
};

export default Button;

2. 구조분해 할당으로 전달

Button.jsx

// 구조분해 할당
const Button = ({ text, color, children }) => {
  return (
    <button style={{ color: color }}>
      {text} - {color.toUpperCase()}
    </button>
  );
};

Button.defaultProps = {
  color: "black",
};

export default Button;

결과

[React] Component & JSX

개발새발 — Sun, 4 Aug 2024 11:13:06 +0900

Component

JavaScript에서 html을 리턴하는 함수

함수의 첫 글자는 대문자로 작성해야 컴포넌트로 인식한다.

vite를 통해 생성한 프로젝트 를 실행시켰을 때 원리를 간단히 보면

1. index.html파일에서 main.jsx실행

2. main.jsx에서 App Component 렌더링

3. App Component(함수)는 html을 리턴

JSX

JSX는 html과 JavaScript를 혼용해서 사용할 수 있도록 JavaScript를 eXtension한 것

JSX 주의 사항

1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다. {number %2 == 0 ? "짝수":"홀수"}

2. 숫자, 문자열, 배열 값만 렌더링 된다. (객체는 오류 발생)

3. 모든 태그는 닫혀있어야 한다.

4. 최상위 태그는 반드시 하나여야만 한다.

[React] React App 생성하기 (+ Vite)

개발새발 — Sun, 28 Jul 2024 13:14:37 +0900

Vite(비트)를 이용하면 React의 기본적인 패키지를 갖춘 프로젝트를 쉽게 생성할 수 있다.

1. $: npm create vite@latest

위의 명령어를 실행 후 React 선택

언어 선택

프로젝트의 기본 틀이 만들어졌다.

2. $: npm i

package.json에 명시되어 있는 dependencies를 설치하기 위해 install 명령어를 입력해준다.

npm i를 통해 필요한 lib들이 패키지 내에 설치가 됨

3. npm run dev를 입력하 여 React App 실행

아래와 같이 로컬에서 React App이 실행된다.

[JavaScript][기초] Promise, async 비동기 처리

개발새발 — Sun, 28 Jul 2024 11:42:26 +0900

자바스크립트는 싱글 스레드로 작동하기 때문에 Stack에서 코드를 순차적으로 실행시키고 Web APIs에 비동기 작업을 위임한다.

Web APIs에서 완료 된 비동기 작업들은 Callback queue에 할당되고 Event loop를 통해 Stack에 등록되면 callback 함수가 호출된다.

1. Promise

add10 함수 호출 2초후에 executor가 실행 된다.

function add10(num) {
  // Promise는 비동기 작업을 감싸는 객체
  const promise = new Promise((resolve, reject) => {
    // executor
    // 비동기 작업을 실행하는 함수
    setTimeout(() => {
      if (typeof num === "number") {
        console.log("executor");
        resolve(num + 10); // 성공 후 num + 10 값을 then으로 보냄
      } else {
        reject("Not Number type"); // 실패 catch로 error message를 보냄
      }
    }, 2000);
  });

  return promise;
}

add10(1)
  .then((result) => {
    console.log("first then", result);
    return add10(result);
  })
  .then((result) => {
    console.log("second then", result);
    return add10(result);
  })
  .then((result) => {
    console.log("third then", result);
    return add10(result);
  })
  .then((result) => {
    console.log("final then", result);
  })
  .catch((error) => {
    console.log(error);
  });


// 출력
// executor
// first then 11
// executor
// second then 21
// executor
// third then 31
// executor
// final then 41

2. async, await

printData()함수는 Promise객체를 리턴하고 getData()함수가 끝날 때 까지 기다린다.

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        name: "DY",
        id: "async",
      });
    }, 1500);
  });
}

// async
// 어떤 함수가 Promise를 반환하도록 변환해주는 키워드

// await
// async 함수 내에서만 사용이 가능한 키워드
// 비동기 함수가 다 처리될 때 까지 기다리는 역할

async function printData() {
  console.log("start");
  const data = await getData();
  console.log(data); // {name: 'DY', id: 'async'}
  console.log("end");
}

console.log(printData()); // Promise {<pending>}

[JavaScript][기초] 배열 변형 메소드 (filter, map, sort, toSorted)

개발새발 — Sun, 14 Jul 2024 12:16:41 +0900

1. filter
기존 배열에서 조건을 만족하는 요소들만 필터링하여 "새로운 배열"로 반환

let arr1 = [
  { name: "dy lee", address: "KR" },
  { name: "sy im", address: "KR" },
  { name: "yj kim", address: "US" },
];

const bundangPeople = arr1.filter((item) => item.address === "KR");

console.log(bundangPeople);
// [
//     {
//         "name": "dy lee",
//         "address": "KR"
//     },
//     {
//         "name": "sy im",
//         "address": "KR"
//     }
// ]

2. map
배열의 모든 요소를 순회하면서, 각각 콜백함수를 실행하고 그 결과값들을 모아서 "새로운 배열"로 반환

let arr2 = [1, 2, 3];

const mapResult1 = arr2.map((item, idx, arr) => {
  console.log(idx, item);
  return item * 2;
});
console.log(mapResult1); // [2, 4, 6]

let names = arr1.map((item) => item.name);
console.log(names); // ['dy lee', 'sy im', 'yj kim']

3. sort
배열을 사전순으로 정렬하는 메소드

let arr3 = ["z", "f", "a"];
arr3.sort();
console.log(arr3); // ['a', 'f', 'z']

let arrNumber = [10, 3, 21, 5, 4];

// 숫자도 사전순으로 정렬되는 문제가 있음
console.log(arrNumber.sort()); // [10, 21, 3, 4, 5]

// 오름차순 정렬
arrNumber.sort((a, b) => {
  if (a > b) {
    return 1;
  } else if (a < b) {
    return -1;
  } else {
    return 0;
  }
});
console.log(arrNumber); // [3, 4, 5, 10, 21]

4. toSorted
원본 배열은 그대로 두고, 정렬 된 새로운 배열을 반환

let arr5 = ["e", "a", "g", "z"];
const sortedArr = arr5.toSorted();
console.log(arr5); // ['e', 'a', 'g', 'z']
console.log(sortedArr); // ['a', 'e', 'g', 'z']

5. join
배열의 모든 요소를 하나의 문자열로합쳐서 반환하는 메소드

let arr6 = ["hi", "i am", "DY lee"];
const joined = arr6.join();
console.log(joined); // hi,i am,DY lee

const joinedDash = arr6.join("-");
console.log(joinedDash); // hi-i am-DY lee

[JavaScript][기초] 배열 순회탐색 메소드 (forEach, includes, indexOf, findIndex, find)

개발새발 — Sun, 14 Jul 2024 12:10:52 +0900

1. forEach
배열의 모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드

let arr1 = [1, 2, 3];
arr1.forEach(function (item, idx, arr) {
  console.log(item * 2);
  // 2
  // 4
  // 6
});

// 아래와 같이 응용가능
let doubledArr = [];
arr1.forEach((item) => {
  doubledArr.push(item * 2);
});
console.log(doubledArr); // [2, 4, 6]

2. includes
배열에 특정 요소가 있는지 확인하는 메소드

let arr2 = [1, 2, 3];
console.log(arr2.includes(3)); // true
console.log(arr2.includes(11)); // false

3. indexOf
특정 요소의 인덱스(요소)를 찾아서 반환하는 메소드

let arr3 = [1, 2, 3];
const index = arr3.indexOf(2);
console.log(index, arr3[index]); // 1 2

4. findIndex
모든 요소를 순회하면서, 콜백함수의 조건을 가장 먼저 만족하는 경우
특정 요소의 인덱스(위치)를 반환하는 메소드

let arr4 = [1, 2, 3];
const findedIndex = arr4.findIndex((item) => {
  if (item === 2) return true;
});
console.log(findedIndex); // 1

const oddNumberIndex = arr4.findIndex((item) => item % 2 !== 0);
console.log(oddNumberIndex); // 0

// 객체 배열인 경우
let objectArray = [{ name: "dy lee" }, { name: "sy im" }];
console.log(objectArray.indexOf(1)); // -1
console.log(objectArray.findIndex((item) => item.name === "sy im")); // 1

5. find
모든 요소를 순회하면서 콜백 함수를 만족하는 경우, 해당 요소(객체)를 그대로 반환

let objectArray2 = [{ name: "dy lee" }, { name: "sy im" }];

let findedObject = objectArray2.find((item) => item.name === "dy lee");
console.log(findedObject); // {name: 'dy lee'}