원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금)
1. 클린 코드
📍프로그램 복잡도와 개발 생산성은 반비례
- 프로그램 복잡도가 올라갈 수록 코드 작성 및 수정에 걸리는 시간이 증가
- 개발 초기 단계부터 좋은 코드를 사용하지 않으면 Snowball로 인해 개발 생산성 악화에 Drive
- 그럼 좋은 코드란?
2. 관심사의 분리(Seperation of Concerns), SoC
📍관심사란?
하나의 모듈이 수행하고자 하는 목적
(모듈 : 함수, 클래스 등의 단위)
- 관심사의 분리란, 각 모듈들이 하나의 관심사만 처리하도록 모듈을 분리하는 것
📍관심사를 분리하는 이유?
- 소프트웨어의 특정 부분이 변경되는 이유를 한가지로 제한하기 위해
- 소프트웨어는 유지보수(기존의 기능을 수정, 확장)가 쉬워야 하는데, 여러 모듈이 여러 관심사를 동시에 다루고 있으면 수정하기 힘듬
1️⃣단일 책임 원칙 (Single Responsibility Principle)
- 관심사 = 책임
- 각 모듈들은 책임(수행해야 하는 동작)을 가지고 있으며 각기 하나의 책임만을 가져야 한다
2️⃣KISS (Keep It Simple, Stupid)
- 각 모듈은 간단하고 단순하게 만들어야 한다
- 모듈이 복잡해지면 유지보수가 힘들어진다
3. Custom Hook
📍React의 관심사
- React : UI를 구축하는 라이브러리
- React의 핵심 관심사
1️⃣UI : JSX로 표현
2️⃣로직 (UI를 변경시키는 부분) : API, 입력 등을 처리
📍React에서 관심사를 분리하는 방법1: Presentational - Container 패턴
- 컴포넌트를 2 계층으로 분리하는 패턴
1️⃣Container
UI를 구성하고 변화하기 위한 로직에 집중하는 컴포넌
2️⃣Presentational
UI가 어떻게 구성되어야 하는지에만 집중하는 컴포넌트
- Presentational 을 Container로 감싼 후, 필요한 정보들과 로직을 모두 props로 전달해주는 형태
- React 16.8에서 Hook이 등장하고나서는 Custom Hook을 사용하기 때문에, 쓰이지 않음
📍React에서 관심사를 분리하는 방법2: Custom Hook
- 다크모드와 라이트 모드를 조절하는 커스텀 훅 예시
import { useState } from "react";
import "./styles.css";
export default function App() {
// 배열일 경우 커스텀 훅이 반환하는 값을 그대로 정의해서 사용
// 객체로 리턴하는 경우 필요한 것만 꺼내서 쓸 수 있음음
const [isLightMode, changeMode] = useToggle(true);
return (
<>
<h1
style={{
backgroundColor: isLightMode ? "white" : "black",
color: isLightMode ? "black" : "white"
}}
>
Current Mode : {isLightMode ? "Light Mode" : "Dark Mode"}
</h1>
<button onClick={changeMode}>Change Mode</button>
</>
);
}
// 호이스팅되는 커스텀 훅 구현체
const useToggle = (defaultValue) => {
// 1. UI를 바꾸는데 필요한 상태를 먼저 파악
// light mode 이면 light mode UI
// dark mode 이면 dark mode UI
// 따라서 이 둘을 왔다갔다 하는 상태가 하나 필요
const [toggle, setToggle] = useState(defaultValue);
// toggle 상태는 boolean값이고
// changeToggle 함수가 상태르 변경
const changeToggle = () => {
setToggle((prev) => !prev);
};
// 이 2가지를 리턴
// 객체 형태로 리턴 : 자유로움
// 배열 형태로 리턴 : 튜플이므로 순서를 틀리면 안되고 빼먹으면 안됨
return [toggle, changeToggle];
}
📍Custom Hook 만드는 규칙
1️⃣React 기본 Hooks 를 호출하는 함수여야 한다
2️⃣함수 이름이 use로 시작해야 한다