[TIL] 5월 4일 기록

오늘의 할 일

✅ 📌 어제자 TIL - [내일 할 일] 확인

✅ 📌 ~20:00 팀 데일리 미션 출제

✅ 📌 ~23:59 멘토 데일리 미션 답변

✅ 📌 ~다음날 06:00 팀 데일리 미션 답변

✅ 📌 TIL 작성

 

오늘의 나는 무엇을 잘했을까?

• 페어프로그래밍 진행: 그저께부터 계속 팀원과 함께 꾸준히 팀플을 진행하고 있고, 오늘은 팀원과 페어프로그래밍을 진행하며 진행 상황에 대해 실시간으로 활발히 소통했다.
• 멘토링에서 많은 것을 얻었다. 리액트 컴포넌트의 데이터 흐름, 컴포넌트화 팁, 그 외에 몰랐던 여러 정보들도 알려주셔서 다양한 것들을 깨달을 수 있었다. 우리 멘토 최고👍

 

오늘의 나는 무엇을 배웠을까? ⭐(중요체크)

[React로 데이터 다루기]

Side effect 요약 정리

Side Effect란? 컴포넌트가 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻합니다.

ex) 어떤 데이터를 외부 API를 호출하여 가져올 때, API가 응답이 느리거나 하면 사용자 경험 측면에서 일단 화면에 먼저 렌더링할 수 있는 것은 먼저 렌더링하고, 외부 API를 호출해 가져오는 데이터는 비동기로 가져오는 것이 좋습니다.

 

useEffect 훅은 사이드 이펙트를 실행하고 싶을 때 사용하는 함수인데, 즉 리액트 컴포넌트 외부에 있는 데이터나 상태를 변경할 때 주로 사용됩니다.

ex)

// ex1
useEffect(() => {
  fetch('<https://example.com/data>') // 외부로 네트워크 리퀘스트
    .then((response) => response.json())
    .then((body) => setData(body));
}, [])

// ex2
useEffect(() => {
  document.title = title; // 페이지 데이터를 변경
}, [title]);

 

useEffect에서 사이드 이펙트를 처리하면 정리가 필요한 경우가 있습니다. 이럴 때 return으로 정리 함수를 리턴할 수 있는데, 이 정리 함수에서는 사이드 이펙트에 대한 뒷정리를 합니다.

ex) 앞서 사이드 이펙트를 처리하기 위해 메모리 작업을 했다면 이를 해제해주는 작업을 정리 함수에서 수행

 

정리 함수가 실행되는 시점

• useEffect의 콜백 함수가 1번 실행되면 정리 함수도 1번 실행

더 정확히는..

• 재랜더링되면서 새로운 콜백 함수가 호출되기 전에 실행
• 언마운트되기 직전에 가장 마지막에 실행

 

리뷰 별점 컴포넌트 만들기

import './Rating.css';

const RATINGS = [1, 2, 3, 4, 5];

function Star({ selected = false }) {
  const className = `Rating-star ${selected ? 'selected' : ''}`;

  return (
    <span className={className}>★</span>
  );
}

function Rating({ value = 0 }) {
  return (
    <div>
      // 배열 렌더링
			{RATINGS.map((rating) => (
        <Star
          key={rating}
          selected={value >= rating}
        />
      ))}
    </div>
  );
}

export default Rating;

• 평점에 따라 색을 채워야 되는 별이라면 이를 스타일링하는 css class를 추가
• 삼항연산자에서 따로 class를 추가하지 않는 경우엔 className='' 이런 식으로 빈 문자열 넘겨주기 가능

 

멘토링

• 무조건 데이터는 위에서 아래로 흘러간다. = 단방향 데이터 흐름(flux)
• 컴포넌트만 따로 떼어놓고 독립적으로 생각하는 게 더 좋을 수 있음.
• icon 또한 쓰는 게 정해져 있어서 이름을 prop으로 주는 icon 컴포넌트를 만들 수 있음
• 다양한 곳에서 쓰이는 컴포넌트의 경우 그 내부에서 state를 관리하기 보단 외부에서 prop을 전달하는 것을 추천
• 순수함수: state를 갖지 않는 함수. 항상 값을 어딘가 받아서 output을 만들어내는 함수
• state를 어느 컴포넌트에서 가져야할지 헷갈리는 경우 → 컴포넌트의 역할을 분명히 정해놓고 시작하는게 좋음. ex) GNB가 로그인여부를 책임지지 않는다면 prop만 받아서 결과물을 내놓거나, 아니면 책임을 진다면 GNB 그 자체에서 데이터를 관리하도록.
• router는 최신 버전이 있어서 찾아보는 게 좋다.
• ref는 DOM 노드 접근뿐만 아니라 state가 아닌 어떤 변수의 값을 유지하고 싶을 때 사용. ref 값이 변해도 렌더링되지 않고, 또 다른 state에 의해 렌더링될 때 이전의 ref 값은 그대로 유지됨.
• 깊게 공부하는 것도 좋지만.. 꼭 알아야만 하는 경우가 아니라면 그렇게 목매서 공부하는 것은 오히려 손해. 애초에 라이브러리를 쓰는 것도 내부 동작은 모르지만 개발자들이 편하게 사용하는 것과 비슷한 맥락으로 생각하자.

 

오늘의 나는 무엇이 궁금했나?

• 오늘은 페어 프로그래밍을 진행하면서 궁금한 점이 많이 없었다. 그래도 오늘 배운 것 중에 인상깊었던 부분은, ref를 DOM 노드에 접근하는 것 외에도, 렌더링하지 않으면서 컴포넌트 내부에 관리되는 값을 유지하고 싶을 때 사용한다는 것을 알았다. 코드잇 강의에선 (아직 다 듣지 않았는데 후반에 나오려나?) DOM 노드 접근 예시만 보여서 단순히 DOM 노드에 접근할 때만 사용하겠구나 생각했는데, 멘토님의 피드백을 통해 다른 사용처도 있다는 것을 알게 된 게 매우 인상 깊었다.

 

오늘 하루 회고

멘토링 시간이 유익했다.

리액트 초보라서 실무를 하고 있는 멘토분께 조언을 듣는 것이 매우 유익한 시간이었다. 리액트는 어디까지나 단방향 데이터 흐름이니까 이걸 항상 명심하면서 state lifting이나 prop으로 계속 내려주는 거에 혼란을 겪어도 계속 하다보면 익숙해질 것이라고 조언해주셨다. 또 팀원끼리 하는 데일리 미션을 멘토분도 다 읽어보면서 중요한 부분이나, 좀 더 덧붙여서 중요한 부분을 얘기해주셔서 너무 좋았다. 그동안 데일리 미션은 팀원끼리 조사해서 공유하는 식이라서 이게 맞는 정보인지 잘 알 길이 없었는데, 멘토님이 한 번씩 확인해주시니까 완전히 신뢰되고 또 리마인드돼서 너무 좋았다.

페어 프로그래밍 시작!

이번주차 위클리 미션은 페어 프로그래밍 방식으로 진행하기 때문에 초반부터 조금씩이라도 꾸준히 하고 있었다. 그저께부터 이틀 간에 걸쳐 구상이랑 ui 작업을 했고, 오늘은 ui 작업을 토대로 리액트로 개발하기 시작했다. 혼자 할 때보다 팀원과 이 코드는 어떤지, 이렇게 수정하면 어떤지, 계속 피드백을 하고 받고 소통하다 보니, 코딩에 재미도 느끼고 식견이 넓어지는 게 많이 느껴지는 귀중한 경험이 되었다.