[Spring, React] useEffect를 사용해서 새로고침해도 저장된 고객정보가 보이도록 페이지에 반영해보자

 

 

고객 명단 화면을 띄우면 DB에 저장된 명단을 가져와 보여줘야한다.
그러나 새로고침을 하거나 다시 탭에 들어오면
DB에 정보가 저장되어 있어도 화면에 가져오지 못한다.
그래서 이 부분을 개선해보고자 한다.

 

 

 

 

 

1. 환경설정

• 프론트엔드 = React + Vite +WebStorm
• 백엔드 = Spring + IntelliJ
• DB = MySQL + MySQLWorkbench

 

 

---

 

 

 

2. 문제점

• 화면

sori를 추가하여 저장했다. MySQLWorkbench를 살펴보면 제대로 저장되어있다. 이제 다시 화면으로 돌아가서 새로고침을 했다. 등록됐던 sori가 사라졌다. 하지만 여전히 MySQLWorkbench에는 잘 저장되어있는 상태였다. 왜 이런 문제가 발생한걸까?

 

 

• 원래 코드
  

// 화면에 보여줄 고객 목록
const [rows, setRows] = useState([]);

useState는 화면을 업데이트 하고 싶을 때 사용한다. React를 설치하면 나오는 초기 화면에서도 useState를 사용했는데, 아래 링크를 타고 들어가면 쉽게 그 예를 확인할 수 있다.

추가한 고객의 정보가 바로 화면에 반영되도록 하기 위해 useState를 사용했다. 그러면 정보가 알아서 유지될 줄 알았는데, 새로고침을 하니 사라졌다.  왜 useState는 새로고침시 사라지는걸까?

일단 그 이유를 말하기 전에, useState에 대해 알면 더 좋다. useState는 배열 구조 분해를 사용하고 있다. 배열 구조 분해는 자바스크립트 문법으로 말그대로 배열의 구조를 분해하는 형태를 말한다. [rows, setRows] 이런 형태를 배열 구조 분해라고 한다. 그래서 useState는 배열 구조 분해를 사용하면서 [something, setSomething]과 같은 변수의 이름을 지정한다. 전체적으로 어떻게 쓰는지를 살펴보자. const [현재 state(처음엔 초기값이 들어옴), 다른 값으로 변경할 set함수] = useState(초기값); 이렇게 적는다. 

useState 값은 메모리에 있다. 화면을 보여줄 고객 목록을 useState로 메모리에 있게 만들었으니, 메모리 특징이 적용된다. 메모리의 특징은 탭을 닫거나 새로고침을 하면 메모리가 초기화되는 것이다. 그래서 새로고침을 하면 초기값인 useState([]);가 되어 아무것도 보이지 않게 된다. 이제 문제를 알게 됐다. 문제를 알게되니까 이게 당연하게 될거라고 생각했는지 의문이다! 개발하다보면 언제나 '이런 것도 구현해야하는거였구나...'하고 생각하게 된다. 이제 문제를 고쳐보자!

 

 

- usestate

useState – React

 

 

 

 

---

 

 

 

 

3. 코드 수정

• 어떻게?
  처음에 생각했을땐 대대적인 공사가 이뤄질 것 같았다. 저장 버튼을 눌렀을 때부터 다 뜯어 고쳐야하는줄 알았다.(저장을 누르면 useEffect로 DB에 저장된 정보를 들고와야한다고 생각했다) 그런데 곰곰히 생각해보니 그냥 화면이 처음 보여질때만 useEffect로 DB에서 가져오면 되는 것 같다. 정보가 저장되면 useState로 업데이트된 화면을 보여줄 것이다. 그리고 새로고침하거나 새로 탭을 열면 그땐 useEffect가 DB에서 정보를 꺼내와 보여줄테니, 문제 없게 된다. 
  
  
  
• React - useEffect 코드

    useEffect(() => {
        const effectCustomers = () => {
            // 경로로 보내자(GET방식) -> spring의 컨트롤러에서 처리
            fetch("/api/customers")
                // 응답을 받고 바디를 json을 파싱해서 JS객체로 변경
                .then((response) => {
                    return response.json();
                })
                // data에 담은 뒤, useState 코드에 있는 setRows에 보내 화면 업데이트
                .then((data) => {
                    setRows(data);
                })
                // 에러 발생 시 처리하기
                .catch((error) => {
                    console.error(error);
                    alert("고객 목록을 불러오지 못했습니다.");
                });
        };

        // effectCustomers 실행
        effectCustomers();
    }, []);

useEffect는 외부 시스템과 컴포넌트를 동기화하는 React Hook이다. 여기서 React Hook은 여러 기능을 사용할 수 있는 도구함 같은 존재인데 useEffect 말고도 useState도 Hook 중 하나이다. React Hook에 대한 링크를 아래에 달아두겠다.

React는 원래 UI를 그리는 것에 집중하지만 이렇게 프로젝트를 하다보면 그리는 것 외에 필요한 부분이 있다. 지금 하고 있는 프로젝트처럼 서버에서 데이터를 가져오는거나, 로그인 상태를 확인하거나, 알림 혹은 타이머같은 기능도 useEffect를 사용해야한다. 

 

// 같은 코드 더 깔끔한 버전 - GPT

useEffect(() => {
    
    // useEffect 안에서는 직접 async를 쓸 수 없다.
    // 내부에 async 함수를 하나 만들고 호출하는 패턴을 사용했다.
    // 보통은 async 함수가 외부에 있다.
    const effectCustomers = async () => {
        try {
            // GET 요청
            const response = await fetch("/api/customers");
            // 응답 바디를 JS 객체로 변환
            const data = await response.json();
            // useState의 setRows에 data를 넣어 화면 업데이트 
            setRows(data);
        } catch (error) {
            console.error(error);
            alert("고객 목록을 불러오지 못했습니다.");
        }
    };

    // effectCustomers 실행
    effectCustomers();

}, []);

 

 

 

- hooks

내장 React Hook – React

 

 

- useEffect와 sideEffect의 차이점

[React] useEffect와 sideEffect

 

 

- 코드참고

[React] SpringBoot 와 React 연동하기 - vite build

 

 

• Spring - Controller

    @GetMapping
    public List<Customer> effectCustomers() {
        return customerRepository.findAll();
    }

GET 방식으로 프론트에서 요청을 보냈으니, 컨트롤러에서도 GET 방식으로 받는다.  그리고 반환 타입은 List<Customer>로 했다.  왜냐하면 이 메서드는 여러 고객 데이터를 반환해야하기 때문이다. Customer는 엔티티으로 설정했으며 엔티티란, 테이블을 관리할 때 필요한 데이터의 집합이다. Customer에는 name, grade, phone, code, note가 있다.(이걸 꺼내오는 것!) 레포지토리에서 정보를 꺼내는데 이때 findAll로 모든 고객을 조회하고 그 결과를 리스트로 반환한다.

 

 

• 수정 후 화면