[React] return을 알맞게 써줘야 합니다.

강의 Udemy

The Modern React Bootcamp

 

이번 강의에서는 Form을 리액트에서 다루는 거 였다. 이것 역시 component를 여러 개로 나눠서 하나는 form을 구성하는 component, box를 만들 때 필요로 하는 데이터를 받고 전달해주는 component, 그리고 box를 만들어내는 component. 이렇게 모아놓고 보니까 JS에서 썼던 MVC 모델이 생각나네. 리액트 자체가 그렇게 사용할 수 있도록 만들어진 프레임워크인건가? 아무튼 처음에 대략적인 설명을 듣고 코드를 짰을 때는 remove 버튼을 작동할 수 있게끔 하는 거 빼고는 얼추 작동하게 했는데 풀이강의 듣고 나서 다시 처음부터 싹 다 코드를 쓰는데 어라? 왜 form에서 입력한 게 box로 만들어져야 하는데 왜 안 만들어지는거야...? 이거 때문에 골머리를 앓았는데 'return' 키워드를 안 써서... 안 만들어지는 거였다. 시간이 오래 걸렸지만 뭐가 문제였는지 알았으니 그나마 다행.

 

컴포넌트의 구성은 App > BoxList > NewBoxForm에서 form을 입력하면 여기에 Box 추가. 그리고 처음으로 key로 사용할 수 있도록 유니크한 아이디를 생성해서 쓸 수 있게 해주는 라이브러리를 사용해봤다. API를 이용해서 data를 받아올 땐 그 값 안에 보통 유니크한 id가 포함되어 있는데 이건 내가 직접 만드는 거라 index를 가지고 key로 이용하곤 했는데 그건 좋지 않은 방법이라 UUID 라이브러리를 이용해 id를 만들어 사용-! 

 

 

 

  renderBoxes() {
    return this.state.boxes.map(box => (
      <Box
        width={box.boxWidth}
        height={box.boxHeight}
        color={box.boxColor}
        key={box.id}
        id={box.id}
        removeBox={() => this.removeBox(box.id)}
      />
    ));
  }

이것이 바로... 내가 return을 하지 않아서 '이게 왜 도대체 왜 안나오지?' 수백번 외쳤던 코드. return 넣으니까 박스가 아주 잘 보인다.

 

 

 

removeBox(id) {
    this.setState({ boxes: this.state.boxes.filter(box => box.id !== id) });
  }

리액트에서는 만들어지는 하나의 컴포넌트마다 key에 유니크한 id를 부여하라고 매번 경고가 뜨곤 하는데 이 id의 좋은 점이 각각의 객체마다 구별을 할 수 있다는 것. 그래서 만들어진 box를 없앨 때도 이 id를 이용할 수 있다. state에 form에서 입력한 것을 배열로 넣어 filter로 id가 일치하지 않는 것을 다시 배열로 반환하면 된다. 그러면 id가 일치한 것은 배열에서 제외되어 없앨 수 있다. 그리고 onSubmit를 form에서 쓸 때 preventDefault를 잊지말 것.