codesoom week7 회고

김_리트리버·2021년 3월 15일
0

Facts

로그인 및 리뷰 작성기능 구현

Findings

  • Authentication, Authorization 차이
    Authentication = 유저가 누군지 확인 하는 것
    Authorization = 확인 된 유저에게 자원을 사용할 권한을 주는 것
  • onChange,onSubmit 에서 event 관련된 로직은 view 를 담당하는 컴포넌트에서 처리하면 관심사를 분리하는데 좋다.
<form onSubmit={(event) => {
      event.preventDefault();
      onSubmit();
    }}
    >
      <label htmlFor="email">
        email
      </label>
      <input
        type="email"
        id="email"
        name="email"
        onChange={({ target: { name, value } }) => {
          onChange({ name, value });
        }}
        value={email}
      />
      <label htmlFor="password">
        password
      </label>
      <input
        type="password"
        id="password"
        name="password"
        onChange={({ target: { name, value } }) => {
          onChange({ name, value });
        }}
        value={password}
      />
      <button type="submit">Log In</button>
    </form>
  • 컨테이너 컴포넌트 안에 또 다른 컨테이너 컴포넌트를 넣는건 관심사 분리 측면에서 옳지 않다.
  • button type 이 submit 일 경우 jest 에서 onSubmit 을 별도로 event.preventDefault() mock 처리 해줘야 한다.
const onSubmit = jest.fn();
it('renders button ', () => {
    onSubmit.mockImplementation((event) => {
      event.preventDefault();
    });
    const { getByRole } = render(<ReviewForm onSubmit={onSubmit} />);

    const postReviewButton = getByRole('button', { name: '리뷰 남기기' });

    expect(postReviewButton).toBeInTheDocument();

    fireEvent.click(postReviewButton);
    expect(onSubmit).toHaveBeenCalled();
  });

Feelings

관심사를 분리해서 만들었다고 생각했지만 확실히 분리되지 않았던 부분이 많았다.

react 컴포넌트의 관심사를 정의한 다음 컴포넌트를 구성해야 겠다.

상태중심이 아니라 액션위주로 사고하는 방식을 점점 알 것 같은 기분이 든다.

기존에 react 를 사용할 때는 useEffect 에 특정 상태를 중심으로 action을 dispatch 하는 식으로

구성을 하곤 했다.

그러다 보니 UI 와 로직이 결합된 형태가 되곤 했는데 액션중심으로 해보니 상태에 따라 useEffect 를 언제 할 건지 신경쓰지 않게되었다.

그냥 기능만 잘 되면 되는 거 아닌가 라고 생각했었는데 코드숨을 하면서 기존의 생각이 깨지는 경우가 많다.

하지만 깨진 만큼 성장할 것 같아 기분이 좋다!

profile
web-developer

0개의 댓글