[React-The Complete Guide] Section5 : Rendering Lists & Conditional Content 정리

팀 프로젝트가 끝난 뒤,
내가 부족한 부분을 공부하고자 유데미 강의를 결제했다.

React-The Complete Guide는 리액트 기초부터
리덕스, 타입스크립트 까지 방대한 양을 가지고 있는 강의다.

한글자막이 지원되는 버전도 있는데,
자막 상태가 좋지 않아서 즉시 환불하고 재 결제했다.
(1/24까지 재정비 된다는데 기다릴 시간이 없었다.)
한글 자막이 지원되면 영어자막은 지원이 안된다고한다.
ot는 한글/영어 자막 둘 다 있길래 결제했는데,,,ㅠㅠ

아무튼, 이 강의에서 내가 모르는 부분 부터 듣고자했고,
section5는 알고있는 내용이지만 확실히 하기위해
여기서 부터 듣기로 결정했고, 간단히 정리한 내용을 바탕으로
프로젝트의 코드를 리팩토링 할 예정이다.

---

Dynamic List

• useState로 리스트를 관리할 때는 최신 상태를 유지하면서 업데이트를 해야한다.

//예시
const [expenses, setExpenses] = useState(DUMMY_STATES);

const addExPenseHandler = expense =>{
	setExpense(prevExpenses => {
			return [expense, ...prevExpenses];
		}
}

• 위와 같은 방식으로 useState에서 원래의 값을 제공한다.

map

• arrow function을 사용하면 jsx를 리턴해줄 수 있다.
• array.map(x=><div key={x.id}>{x.name}</div>)와 같은 형태로 사용할 수 있다.
• map을 이용해서 컴포넌트를 만들 때 key값을 꼭 넣어줘야한다.
• key는 항상 유니크한 값이 들어가야한다.
• id가 없으면 index를 이용할 수도 있는데, 인덱스는 다른 컴포넌트에서도 같은 아이디를 가질 수 있어서 조심해야한다.
  array.map((x,index)=><div key={x.index}>{x.name}</div>)
• map에서 화살표 함수를 사용하지 않으면 조건에 해당되는 값들로만 배열을 만들 수 있다.

Conditional Content

• 조건에 따라 컴포넌트를 사용할 수 있다.

&&

• 삼항연산자 이외에 &&를 사용할 수 있다.
• 조건이 True일 경우 실행된다.
  isEditing && <EditComponent/>
• 예시

{/* 클릭된 버튼의 id가 id와 같으면 해당 차트 표시 */}
        {tap === "column-btn1" && (
          <BasicInformationChart datas={selectStepData(basicDataByStep)} />
        )}
        {tap === "column-btn2" && (
          <TimeInfomationChart datas={selectStepData(timeDataByStep)} />
        )}
        {tap === "column-btn3" && (
          <CategoryInfomationChart datas={selectStepData(categoryDataByStep)} />
        )}

        {tap === "column-btn4" && (
          <WordCloud data={selectStepData(wordcloudDataByStep)} />
        )}

변수

• 변수에 컴포넌트 할당이 가능하다.

let exampleComponent = <p> empty.</p>
if (expenses.length > 0) {
	exampleComponent = <p> full </p>
}

• 위와 같은 형식으로 조건을 줘서 변수를 바꿔줄 수도 있다.

분기처리

• 컴포넌트에서 return 할 때 분기처리를 통해 다른 값을 리턴할 수 있다.
  (어찌 생각해보면 당연한데 이 생각을 못했다.ㅎㅎ;;)
• 기존 코드(리팩토링 전)

//searchPage.js
<div className="video-div">
        {videos === null ? (
          <LoadingCircle />
        ) : (
          videos.map(v => {
            return (
              <a
                href={`https://www.youtube.com/watch?v=${v.videoAddress}`}
                target="_blank"
                rel="noopener noreferrer"
                className="video-wrapped-btn"
              >
                <div id="video-div-div">
                  <div id="video-thumbnail">
                    <img src={v.thumbnail} alt={v.videoAddress} />
                  </div>
                  <div id="video-title">
                    <p>{v.title}</p>
                  </div>

                  <div id="video-channel">
                    <p>{v.channel}</p>
                  </div>

                  <div id="video-category">
                    <p>
                      {
                        categoryType[
                          Object.keys(categoryType).findIndex(
                            key =>
                              categoryType[key].category_id === v.categoryId
                          )
                        ].category_name
                      }
                    </p>
                  </div>

- 삼항 연산자를 이용해서 videos의 값이 안들어오면 로딩바를 출력해줬다.
- 코드 전체가 들어가있어서 지저분하다.

• 리팩토링 후

//searchPage.js
<div className="video-div">
        <VideoList item={videos} />
      </div>

//VideoList.js
const VideoList = ({ item }) => {
  if (item === null) {
    return <LoadingCircle />;
  }
  return item.map((x, index) => {
    return <VideoItem video={x} key={x + index} />;
  });
};

//VideoItem.js
 const VideoItem = ({ video }) => {
  return (
    <a
      href={`https://www.youtube.com/watch?v=${video.videoAddress}`}
      target="_blank"
      rel="noopener noreferrer"
      className="video-wrapped-btn"
    >
      <div id="video-div-div">
        <div id="video-thumbnail">
          <img src={video.thumbnail} alt={video.videoAddress} />
        </div>
        <div id="video-title">
          <p>{video.title}</p>
        </div>

        <div id="video-channel">
          <p>{video.channel}</p>
        </div>

        <div id="video-category">
          <p>
            {
              categoryType[
                Object.keys(categoryType).findIndex(
                  key => categoryType[key].category_id === video.categoryId
                )
              ].category_name
            }
          </p>
        </div>

        <div className="video-views-likes">
          <div className="video-likes-div">
            <p id="video-views-p">
              <GrLike />
              {divisionNumbers(video.likes, 1)}
            </p>
          </div>
          <div className="video-views-div">
            <GrView />
            <p id="video-likes-p">{divisionNumbers(video.views, 1)}</p>
          </div>
        </div>
      </div>
    </a>
  );
};

-비디오 리스트의 요소를 담당하는 videoItem, 전체 비디오 리스트인 videoList컴포넌트를 만들어주었다.
- 복잡했던 searchPage.js에서 비디오 아이템 로직 부분을 간단하게 표현할 수 있다.