해당 벨로그는 [코딩앙마] React js 강좌 를 수강하고 작성한 글입니다.
API 를 열었으니 dummy 를 하나씩 바꿔보자.
DayList.js
dummy 를 지우고, days 라는 state 를 만든다.
state 에 빈 배열을 만들고, API 에서 리스트를 가져와서 바꿔주는 방식으로 코딩하자.
이 방식으로 한다면, 데이터가 바뀌면 자동으로 랜더링 된다.
결과창
days 가 아무것도 없으니 결과창에 출력된 것이 없다.
DayList.js
API 호출 전에, useEffect 라는 훅에 대해서 알아보자.
useEffect 는 useState 와 동일하게 react 에서 import 해 왔다.
useEffect 는 어떤 상태값이 바뀌었을 때 동작하는 함수를 작성할 수 있다.
useEffect 는 첫번재 매개변수로 함수를 받는다.
결과창
useEffect 의 첫번째 매개변수를 통해 change 를 콘솔창에 출력했다.
이 함수가 호출된 타이밍은 랜더링 결과가 실제 DOM 에 담긴 직후이다.
해당 메인페이지의 랜더링 결과가 화면에 그려지고나서, 직후 console 창에 change 가 출력된다.
그리고 컴포넌트가 사라지기 직전에도 함수가 호출된다.
DayList.js
click 이벤트를 만들고 클릭할때마다 state 를 변경해보자.
count 라는 state 를 만들어서 초기값은 0으로 설정했다.
onClick 함수를 만들어서 실행되는 함수를 1씩 증가시켜보자.
버튼을 하나 만들어서 onClick 이벤트에 onClick 함수를 연결한다.
결과창
버튼을 누르면 콘솔창에 Count change 가 1씩 증가하는 것을 확인할 수 있다.
useEffect 상태값이 변경되서 랜더링되는 다음에 호출되는 것을 볼 수 있다.
랜더링을 끝내고 어떤 작업을 하고 싶다면, 예를 들어 API 호출 같은 경우이다.
useEffect 의 첫번째 매개변수로 함수를 전달해주면 된다.
그런데, 이렇게 코딩하면 매번 변경될때마다, 원하지 않은 상황에서도 불필요하게 함수가 호출될 수 있다.
DayList.js
예를 들어, 버튼 하나를 더 만들고 다른 상태값인 days 를 연결해보도록 하자.
days 의 상태값을 바꿔보자.
setDays 의 첫번째 매개변수에 배열을 넣는다.
배열의 첫 매개변수로 days 배열을 넣는다.
기존 배열에 하나씩 day 를 추가해보자.
Day change 버튼을 생성해 onClick2 함수를 연결한다.
결과창
Day change 버튼을 누르면 Day 가 계속 추가되는데, 그럴때마다 Count change 도 같이 증가한다.
count 는 변경되지 않았는데, useEffect 의 “Count change” 라고 찍는 함수가 계속 실행되고 있다.
단순히 로그를 찍는 작업이 아니라, 어떤 무거운 작업을 하는 함수였다면 불필요한 실행을 계속 하니까 인지가 될 것이다.
DayList.js
그래서 이때는 useEffect 의 두번째 매개변수로 배열을 전달한다.
두번째 매개변수로 배열을 넣고 내용은 count 를 넣는다.
이렇게 하면 count 가 변경되었을 때만, 함수가 실행된다. → 두번째 매개변수로 전달된 배열은 의존성 배열이라고 부른다.
의존성 배열의 값이 변경되는 경우에만 이 함수가 실행된다.
결과창
Day change 버튼을 누르면 Day 만 증가되고, Count change 는 변경되지 않는 것을 확인할 수 있다.
DayList.js
useEffect 사용하는 목적은 API 호출이다.
랜더링이되고, API 를 사용한다는 목적으로 useEffect 를 사용한다.
랜더링이 완료되고 최초로 API 를 한번만 호출해주면 된다.
그럴때는 의존성 배열에 빈 배열을 입력한다.
결과창
count 버튼을 눌러도 최초에 한번만 실행되어 콘솔창에 한번만 찍힌 것을 것을 확인할 수 있다.
랜더링 직후 딱 한번만 실행되는 작업은 빈 배열을 전달하면 된다.
DayList.js
useEffect 부분에서 API 호출을 해보자.
API 통신을 하기 위해 fetch() 를 이용해보자.
fetch 내부에 API 경로를 적어주자.
then 을 이용해서 res(response) . json 을 리턴해준다.
여기서 response 는 http 응답이지 절대 json 이 아니다.
그래서 json 메서드를 사용해준다. 그러면 json 으로 변환된다.
그러면 then 을 이용해 데이터를 받아서 setDays 를 해준다.
결과창
버튼을 누르면 Day 버튼이 추가된다.
Day.js
이제 dummy 로 사용되던 부분을 다 교체해보자.
이렇게 하면 Day 1 에 전체 단어를 다 가져왔다.
이런 것을 경로 뒤에 ( ?day=1 ) 를 설정하면 결과로 Day 1 에 해당하는 단어만 나옴을 알 수 있다.
useParams 를 이용해 주소창에 있는 주소를 가져온다.
?day=1 은 day 에 해당하는 부분이니 백틱과 달러기호를 이용해 ${day} 로 수정한다.
useEffect 의 경고 코드를 확인해보자.
day 가 의존성 배열에 없다는 경고 메시지를 확인할 수 있다.
useEffect 내부에서 ${day} 라는 특정값을 사용하면, 빈 배열 [ ] 에 입력하라는 의미이다.
지금은 의존성 배열이 비어있어서, day 가 바뀌어도 새로운 정보를 가져올 수 없다.
의존성 배열에 day 를 넣으면 이 값이 최신 값임을 보장받을 수 있다.
결과창
해당 주소에 맞춰 알맞은 단어들이 결과로 랜더링 되는 것을 확인할 수 있다.
Day.js 의 useEffect 부분과 DayList.js 의 useEffect 부분이 상당히 유사하다.
해당 API 주소를 제외하고 나머지 코드부분은 거의 동일하다.
동일한 로직은 개발자가 직접 훅을 만들어서 사용할 수 있다. 이것을 커스텀 훅이라고 하는데, 이후 간단하게 작성할 수 있도록 다음시간에 만들어보자.
