useEffect- Strict Mode

문제

• 서버에 저장한 게시글을 조회하기 위해 먼저 useEffect로 테스트를 해봤다.
  단순하게 log만 찍어봤는데, 계속 두번 출력이 됐다.

해결

• useEffect 훅이 두 번 실행되는 이유는 React의 Strict Mode 때문일 가능성이 높다.

• React 17 이상에서는 개발 모드에서 컴포넌트의 마운트와 언마운트를 두 번씩 실행하여 부수 효과와 상태 업데이트에 대한 잠재적인 문제를 찾아내려고 한다.
  이는 개발 환경에서만 발생하며, 프로덕션 빌드에서는 일어나지 않는다.

• useEffect 내부의 코드가 두 번 실행된다고 해서 실제로 컴포넌트가 두 번 렌더링되는 것은 아니다.

• Strict Mode는 개발자가 실수로 생길 수 있는 부작용을 찾아내기 위한 도구이며, 개발 과정에서 도움을 주기 위한 목적으로 사용된다.

• useEffect가 두 번 실행되는 것을 방지하려면, React 애플리케이션의 최상위 컴포넌트에서 Strict Mode를 제거할 수 있다. 하지만 Strict Mode가 제공하는 이점을 고려하여, 개발 과정에서는 그대로 사용하는 것이 좋다.

---

@NotBlank(message = "제목을 입력해주세요.")
    private String title;

    @NotBlank(message = "내용을 입력해주세요.")
    private String content;

• 제목과 내용을 입력했는데도 서버에 제목과 내용을 입력하라는 문구가 출력됐다.

400 에러

400 에러가 발생하는 원인은 클라이언트에서 서버로 보내는 요청 데이터가 서버의 요구 사항을 충족하지 못하기 때문일 가능성이 높다.

• 클라이언트의 React 컴포넌트에서 입력 필드와 useState 훅을 사용하여 제목과 내용을 관리하고 있지만, 이 값들이 실제로 서버로 전송되기 전에 상태에 저장되고 있는지 확인이 필요.

• React 컴포넌트에서 입력 필드의 onChange 이벤트 핸들러를 추가해 setTitle과 setContent 함수를 호출해야 한다.⭐️

<input
    style={{ width: '40%', padding: '5px', lineHeight: '2em' }}
    placeholder="제목을 입력하세요"
    onChange={(e) => setTitle(e.target.value)}
/>

<textarea
    rows="16"
    style={{ width: '40%', padding: '5px', resize: 'none' }}
    placeholder="내용을 입력하세요"
    onChange={(e) => setContent(e.target.value)}
/>

    onChange={(e) => setTitle(e.target.value)}

    onChange={(e) => setContent(e.target.value)}

추가해주고 해결~!

 return (
        <div>
            <div>
                <form onSubmit={handleSubmit}>
                    <div className="text-box">
                        <div>
                            <input
                                style={{
                                width: '40%',
                                padding: '5px',
                                lineHeight: '2em'
                            }}
                                   placeholder="제목을 입력하세요"/>
                        </div>
                        <div>
                            <textarea
                                rows="16"
                                style={{width: '40%',
                                    padding: '5px',
                                    resize: 'none'}}
                                placeholder="내용을 입력하세요"
                            />
                        </div>
                    </div>
                    <div>
                        <button type="submit" className="insertContent"> 저장</button>
                    </div>
                </form>
            </div>
        </div>
    );