CEOS 프론트 스터디 2주차 과제를 하며

개발 지식 보관소·2025년 9월 20일

💡지난 1주차 때 개발했던 vanilla todo를 react+ styled-components로 리팩토링 해보는 게 두번째 과제 !

지난 1주차 과제를 하며 디자인을 비롯해 UI/UX가 부족하다고 느껴 디자인 레퍼런스를 찾아보게 되었다. 지난 주와 다르게 요일별 투두 개수와 완료 개수를 넣는 것이 추가되어 요일이 UI에 표시되는 것으로 수정하는 것이 좋겠다고 생각하였다.

레퍼런스🔎

첫번째 사진 같이 투두리스트가 흰색이고 배경에 색을 주는 디자인을 채택하였다.
요일 별 투두 개수를 표시해야하니, 두번째 사진같이 위에 날짜가 있고 그걸 선택하여 조회하는 방식이 좋겠다고 생각했다.

구상 화면과 최종 배포된 화면❇️

Review Questions⁉️

✨1. Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?

먼저, DOM은 요소들을 트리 형태로 표현한다. 흔히 우리가 아는 p태그 ,div태그 등이 여기에 속한다.

개발자들은 DOM이 제공하는 API를 이용해 이러한 DOM 구조에 접근하고, 내용이나 스타일을 변경할 수 있다. 이런 과정을 DOM 조작이라고 한다.

그렇다면, virtual-dom은 어떤 방식으로 작동할까?
virtual-dom은 실제 DOM의 가벼운 복사본으로 메모리 상에 존재한다. 렌더링 이전의 화면 구조와 렌더링 이후의 화면 구조를 가진 두 개의 가상 돔 객체를 유지하고 있고, 이 두 가상 돔을 비교하여 변경된 부분만 실제 DOM에 반영한다. virtual-dom은 이러한 방식으로 효율적인 방식으로 작동하여 이것을 사용하면 성능이 좋아진다. 이번 과제 때 사용한 React가 이 방식을 사용한다.

✨2. React.memo(), useMemo(), useCallback() 함수로 진행할 수 있는 리액트 렌더링 최적화에 대해 설명해주세요. 다른 방식이 있다면 이에 대한 소개도 좋습니다.

리액트는 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 기본적으로 리렌더링된다. 그런데, 값이나 함수가 실제로 바뀌지 않았는데도 불필요하게 리렌더링되는 경우가 생긴다. 바로, 이를 줄여주는 도구들이 바로 React.memo, useMemo, useCallback이다.

✅ React.memo()
컴포넌트를 기억해서, props가 바뀌지 않으면 리렌더링을 막아줌.
클래스 컴포넌트의 PureComponent 같은 역할.

const Child = React.memo(({ value }) => {
  console.log("Child 렌더링");
  return <div>{value}</div>;
});

// 부모
function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <Child value="고정된 값" />
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
  );
}

👉 버튼을 눌러도 Child는 props가 안 바뀌었으니 렌더링 안 됨.

✅ useMemo()
계산 결과를 기억 해서, 의존 값이 변하지 않으면 다시 계산하지 않음.
복잡한 계산 로직이 있을 때 유용.

const heavyCalculation = (num) => {
  console.log("무거운 계산 실행");
  return num * 2;
};

function App({ number }) {
  const result = useMemo(() => heavyCalculation(number), [number]);
  return <div>{result}</div>;
}

👉 number가 바뀔 때만 다시 계산하고, 그렇지 않으면 저장된 값 재사용.

✅ useCallback()
함수를 기억해서, 의존 값이 변하지 않으면 같은 함수 객체를 재사용.
자식 컴포넌트에 콜백을 props로 넘길 때 불필요한 리렌더링 방지.

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log("clicked");
  }, []); // 빈 배열 → 항상 같은 함수 재사용

  return <Child onClick={handleClick} />;
}

✨3. React 컴포넌트 생명주기에 대해서 설명해주세요.

생명주기 = 컴포넌트가 화면에 나타나고(마운트) → 상태가 바뀌며 다시 렌더링되고(업데이트) → 사라지는(언마운트) 전체 흐름

이번 과제를 하며 배운 것

git 저장소 연결 방법⚠️

깃저장소를 만들고 연결하는 방법이 두가지가 있다. 차이점은 다음과 같다.

✅ 1. git clone
원격 저장소를 복제(clone) 하는 명령어.
실행하면:
원격 저장소의 내용을 모두 다운로드
자동으로 .git 폴더가 생겨서 로컬 저장소 초기화
원격 저장소(origin)과 자동으로 연결
즉, 원격에 있는 걸 그대로 로컬에 가져와서 바로 작업할 수 있음.
👉 주로 기존 프로젝트에 참여할 때 사용.

✅ 2. git init + git remote add origin
빈 로컬 저장소를 하나 만드는 명령어. (.git 폴더 생성)
그다음 git remote add를 해야만 원격 저장소랑 연결됨.
초기에는 아무 파일도 없고, 원격과도 연결 안 되어 있음.
👉 주로 새 프로젝트를 시작해서 나중에 원격에 올릴 때 사용.

두번째 방법을 사용할 때는 git remote add를 해야만 원격저장소와 연결할 수 있다.

styled-components 시작하기💅🏻

 npm install styled-components

위 코드를 terminal에 쳐서 설치한다.

import styled from "styled-components

사용할 파일에 import해준다!

react 프로젝트 시작하기✅

npm create vite@latest react-todo-22nd
cd react-todo-22nd
npm install

npm run dev
위 코드를 쳐서 실행하여 코드가 잘 반영되었는지 확인할 수 있다.

✨각종 CSS 효과 주는법✨

1.border 효과 주는 법

border: 0.1rem solid black;

선굵기, 선종류, 색깔 순으로 쓰면 된다.

선종류는 이렇게 다양하다

2. padding과 margin 효과 순서

padding, margin 효과 줄 때 위, 오른쪽, 아래쪽, 왼쪽 차례로 시계방향으로 효과가 적용된다.

padding: 1rem, 1rem, 1rem, 1rem;

3. background-color를 줄 때

배경 색이 적용이 안되어서 margin말고 padding을 주어야 배경 색이 적용되었다.

4. 정렬하기

display: flex;//이걸 꼭 먼저하구
align-contents: center; //가로 중 가운데
align-items: center;// 세로 중 가운데

5. favicon 적용하기

파비콘은 위의 사진처럼 브라우저, 북마크 등에 아이콘을 적용하는 걸 말해요
적용하는 방법은
첫번째, 아이콘 파일을 public 안의 폴더에 넣는다!
두번째,
index.html의 header부분에

    <link rel="icon" href="/favicon.ico" />

위와 같은 코드를 포함해야해요! 아이콘의 위치에 따라 링크 부분에 해당 이미지의 위치를 수정하여 적어야 합니다.
그럼 위의 이미지처럼 적용이 됩니다.

개발 지식 보관소

게으른 완벽주의자

다음 포스트