부트캠프 34, 35일차 (클라이언트 Ajax 요청)

오늘의 생각

오랜만에 리액트를 공부해서 마음이 편했지만, 역시 네트워크 관련된 부분이라 어려웠다.

데이터 흐름을 이해하고 state 끌어올리기를 사용하는 방법이 왜 단방향 데이터 흐름 원칙을 지키는 지 이번 공부를 통해 제대로 이해할 수 있어서 뿌듯한 기분이 들었다. 

 

Effect Hook은 조금 어려웠다. 부수 효과, 순수 함수 등 생소한 단어들이라 조금 헷갈렸다. 

 

 

특히 페어분과 함께 프로젝트를 진행했을 때 너무 어려웠는데 첫 번째 파트는 쉬운데 반해 두 번째 파트가 너무 어려웠다. 

프로젝트는 항공편 예약 웹페이지를 어느정도 구현하고 필터 기능을 추가하는 것이었는데, 두 번째 파트의 경우 더미 데이터가 아닌 API를 통해 데이터를 fetch 메서드를 통해 가져오고 유저가 도착지를 검색함에 따라 이에 맞는 도착지만 골라 데이터를 보여주는 것이 목표였다.

 

처음에는 쉽잖아? 라고 생각했는데 이게 왠 걸. 테스트가 절대 통과하지 못했다. 심지어 필터링은 잘 되는데 전체 목록이 처음에 보이지 않았다.

 

 

기능이 구현되는 메인 파일에서 시작하자마자 보여주기 위한 데이터 리스트를 state로 저장한 후 컴포넌트를 활용해 보여주는데, 관련해서 업데이트 기능을 위해 useEffect를 사용했기 때문에 컴포넌트가 생성될 때도 자동으로 리스트가 업데이트 되어 아무것도 보여주지 않는다는 것을 알게 되었다.

 

최초에는 도착지 검색 창에 아무것도 없는데 검색했기 때문에 리스트가 보이지 않는다고 생각했는데, 가만히 생각해보니 기존에 데이터를 보여줄 때도 도착지는 딱히 정해져 있지 않아도 리스트가 처음 예시처럼 잘 생성이 되었다.

 

몇 시간 고민이 끊이지 않았고 결국 테스트 파일을 뜯어보기까지 했고 시간이 부족해 테스트도 통과하면서 최초 로딩을 보여주기 위해 아예 최초 검색 조건에 출발지를 "CJU"로 할당해 버렸다. (destination: "CJU"가 테스트 확인 조건이었기 때문에) 문제를 풀면서도 계속 이게 정말 코드스테이츠가 원한 결과값인가? 하는 의문이 들었지만 부족한 시간에 어쩔 수 없다는 선택이라고 생각했다.

 

// 이 세 줄을 못 적어서...
if (destination) {
    url = url + "&destination=" + destination;
  }

 

잠시 후 세션에서 해설을 들었는데, 단 10줄로 끝낼 수 있는 정답이 있었다. if문을 통해 전달받는 인자의 "destination"값을 API와 통신하는 링크에 이어서 붙이는 방법이었다. 

 

아쉬워서 지우지 못한 노력의 흔적

50줄을 적으면서도 문제를 해결하지 못했고, 완벽한 기능 구현을 하지 못했었기 때문에 엄청난 충격과 무기력함에 휩쓸렸다..

 

저녁을 먹으면서 곰곰히 고민을 해 보았다.

 

 

가장 큰 문제는 역시 기본기의 부재인 것 같다.

 

보고 쓸 때는 안다고 생각하지만, 답안지 없이 문제를 풀 때면 안다고 생각하는 것보다 훨씬 못하는 경우가 많다. 사실 프로그래밍에서만 나오는 문제는 아니지만, 그만큼 어느 분야에서든 일통하는 이야기라고 생각했다. 

 

앞으로도 잦은 복습, 그리고 시간이 지났을 때 한 번씩 돌아보며 모자랐던 부분들을 다시 살펴봐야겠다. 개인 프로젝트에서는 내가 헷갈리는 부분들을 기피하지 않고 적극적으로 써 보아야겠다는 생각을 했다.

 

---

오늘의 키워드

상향식(bottom-up), 하향식(top-down), 단방향 데이터 흐름, 공통 소유 컴포넌트, state 끌어올리기 (Lifting state up), 부수 효과(Side Effect), 순수 함수(Pure Function), Effect Hook, useEffect 함수, 종속성 배열(dependency array)

 

---

오늘의 학습내용

• 리액트 데이터 흐름의 방식과 단방향 데이터 흐름의 정의
• 공통 소유 컴포넌트에 state를 위치시키는 이유
• state 끌어올리기 (Lifting state up)를 통한 하위 컴포넌트에서의 이벤트 핸들링과 쓰는 이유
• 부수 효과(Side Effect)의 정의와 발생하는 경우
• 순수 함수(Pure Function)의 정의와 구분법
• Effect Hook을 쓰는 이유와 리액트에서의 역할
• useEffect 함수의 문법과 사용법
• Effect Hook 조건부 실행을 위한 방법과 종속성 배열(dependency array)의 구성

 

---

어려웠던 keyword / 활용한 질문

 

Q. state 끌어올리기를 사용하는 방식과 단방향 데이터 흐름과의 관계에 대해서 설명해 주세요.

 

A. state 끌어올리기는 상태를 변경시키는 함수를 하위 컴포넌트에 props로 전달해서 하위 컴포넌트에서의 이벤트가 부모의 상태를 바꾸는 방식입니다. 이 방식을 채택할 경우 리액트의 하향식 단방향 데이터 흐름의 원칙을 지킬 수 있습니다.

 

 

 

Q. "함수는 Side Effect가 있다."는 말은 무슨 뜻인가요?

A.  함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우를 말합니다. 리액트의 경우 컴포넌트 내에서 API 정보를 가져오거나 이벤트를 활용해 DOM을 직접 조작할 때 등의 상황에서 발생합니다.

 

Q. useEffect 함수를 사용할 경우 종속성 배열을 사용하는 이유와 장점이 무엇인가요?

A. 종속성 배열을 사용할 경우 "어떤 값의 변경이 일어날 때"에 첫 번째 인자인 콜백함수를 호출할 수 있기 때문에 원하는 조건에서만 부수 효과를 실행시킬 수 있습니다. 이를 통해 리액트에서 컴포넌트가 생성되거나 바뀔 때 등 너무 많은 경우에 Effect Hook을 사용하지 않을 수 있어 좀 더 효율적으로 데이터를 사용할 수 있습니다.