[Level 2] 미션 1: 페이먼츠 1, 2단계

 

더 까먹기 전에 정리를 해보자!

 

절대경로

---

CRA로 프로젝트를 만들었다면 아주 간단하게 절대경로로 코드를 작성할 수 있다. root에 jsconfig.json파일을 만들고 아래와 같이 baseUrl을 설정해주면 된다

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

https://create-react-app.dev/docs/importing-a-component/#absolute-imports

 

custom hook

---

리액트를 거의 처음 접해보다보니 1단계에서는 커스텀 훅을 전혀 사용하지 않고 기본적인 react 학습에만 집중했었다. 2단계에서는 시간적 여유가 있어서 이를 학습해 적용해보았다. 커스텀 훅을 학습하기에 앞서 우선 hook에 대해 학습했다

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것 입니다.

state를 어떻게 가지고 있는거지? 라는 궁금증이 들었는데 두 글이 너무 잘 설명해준다(역시 댄은 최고야) 대충 써먹을줄만 알았는데 어떻게 내부적으로 동작하는지 이해하기 좋은 글들이다.

https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889

Making Sense of React Hooks

https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e

React hooks: not magic, just arrays

 

custom Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있습니다.

이 문장을 읽고 custom hook은 재사용에 집중해야하는건가 라고 생각했다. 이렇게 생각하다보니 커스텀훅으로 분리할 것들이 많아보이지 않았고 억지로 재사용하기 위해 로직을 바꿔야하는가 라는 고민에 빠졌다. 관련된 질문을 리뷰어님께 물어보았고 아래와 같은 답변을 얻었다.

재사용 + 추상화 + 가독성을 위해 쓰는 것 같다. util정도로만 생각하고 한곳에서만 사용하는 커스텀훅을 만들어도 되나라는 생각을 많이 했는데 로직 분리를 위해 사용하는 것이었던것! 재사용할 로직들만 커스텀훅으로 분리했었는데 3단계에서는 로직 분리를 위한 분리도 더 해보고 싶다

 

Component

---

이번 미션에서 가장 중점으로 두었던 것은 컴포넌트를 어떻게 나눌 것인가였다. 관련해서 크루들과 많은 이야기도 나눠 보았고 이 과정에서 이런 느낌이구나를 배울 수 있었다. 개인적으로는 HTML tag 수준으로 작은(여기 저기에서 사용되는) 컴포넌트는 최대한 스타일링을 없애고 범용적으로 사용될 수 있도록 작성하였다. 이후 이를 스타일링해가고 조합하면서 더 큰 컴포넌트를 만들었다. 이렇게 하다보니 요구사항이 늘어나도 확장적으로 사용하기 좋았다. 

100%이해한 것은 아니지만 headless UI 방법으로 스타일링을 담당하게 되는 부분을 과감하게 제외하고 상태와 관련된 부분만을 다루도록 component를 만드는 방식이 있는 것 같다. 

https://jbee.io/react/headless-concept/

https://medium.com/@nirbenyair/headless-components-in-react-and-why-i-stopped-using-ui-libraries-a8208197c268

 

Styled Component

---

페어의 도움으로 styled component를 처음 사용해보았다. themeProvider를 통해 공통되는 theme을 분리하였는데 이 과정에서 context API의 장점을 많이 느낄 수 있었다.

미션을 위해서 무지성으로 사용하다보니 낮은 이해도로 정말 써먹기만 했는데 아래 글을 읽으며 등장 배경과 css관련 흐름에 대해 좀 더 이해할 수 있었다.

https://velog.io/@teo/css-history-1#css-%EC%88%98%EA%B3%A0%ED%96%88%EC%96%B4-%EC%9D%B4%EC%A0%9C%EB%8A%94-js%EA%B0%80-%ED%95%B4%EA%B2%B0%ED%95%B4%EB%B3%BC%EA%B2%8C-css-modules-2015

계속 사용하면서 느낀점은 styled component도 결론적으로는 js라는 점! 이를 고려해서 좀 더 확장성 있게 사용하자.

 

제어/비제어 컴포넌트

---

제어 컴포넌트는 자연스럽게 잘 사용하기 좋았는데 비제어 컴포넌트는 어디에 사용해야하는 것일까라는 생각이 들었다. 결론적으로는 계속해서 값을 바라보지 않아도 되는 곳에 사용하는게 적절하다고 느꼈고 카드 닉네임 설정칸을 비제어로 했다. 값에 민감하지 않고 마지막 값만 확인하면 될 때 사용하면 좋지 않을까? 비제어의 필요성은 크게 못느끼고 있다.

 

+

---

축약구문

prop에 어떤 값도 넘기지 않을 경우, 기본 값은 true이다. 일반적으로 값을 전달하지 않는 것을 권장한다(ES6 문법인 initializer 표기법과 헷갈리기 때문에) 

https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true

 

baseUrl 설정

귀찮게 url 다 설정해주지 말고 baseUrl설정하자. browserRouter에 basename으로 설정하면 된다

import { BrowserRouter } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter basename="/app">
      <Main />
    </BrowserRouter>
  );
};

 

초기값 설정

명시적으로 나타낸 prop들은 초기값을 설정해놓자. prop을 하나 줄일 수 도 있고, 예상하지 못한 에러를 막을수도 있다.