로그인 및 리뷰 작성기능 구현
<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>
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();
});
관심사를 분리해서 만들었다고 생각했지만 확실히 분리되지 않았던 부분이 많았다.
react 컴포넌트의 관심사를 정의한 다음 컴포넌트를 구성해야 겠다.
상태중심이 아니라 액션위주로 사고하는 방식을 점점 알 것 같은 기분이 든다.
기존에 react 를 사용할 때는 useEffect 에 특정 상태를 중심으로 action을 dispatch 하는 식으로
구성을 하곤 했다.
그러다 보니 UI 와 로직이 결합된 형태가 되곤 했는데 액션중심으로 해보니 상태에 따라 useEffect 를 언제 할 건지 신경쓰지 않게되었다.
그냥 기능만 잘 되면 되는 거 아닌가 라고 생각했었는데 코드숨을 하면서 기존의 생각이 깨지는 경우가 많다.
하지만 깨진 만큼 성장할 것 같아 기분이 좋다!