TIL. 35 React - 백엔드와의 통신 중 생긴 레이아웃 문제

💡 통신 중 발생한 소소한 문제

• 백엔드와 데이터 통신 중, 데이터를 받아오자 style이 꼬였다. 아무리 생각해도 데이터를 받아왔다고 해서 style이 바뀌진 않을텐데...라고 생각했다.

문제가 발생했던 코드 부분

 {this.props.list.map( x => {
   return (
     <div>
      <Component />
     </div>
 )})}

• 문제는 내가 짰던 map에 있었다. mock data와 백엔드 통신을 번갈아가며 테스트 하는 중에 div에 flex를 준 상태로 map 안쪽에 위치시켜 버려 flex가 풀려버렸다. 어찌보면 당연한 상황인데 바로 캐치하지 못했고, 조금 헤메다가 div를 바깥쪽으로 옮겨 사용했다.

• 물론 작업 후 수정에 수정을 하면서 실수한 것이지만, 이런 작은 부분들이 습관화되어 같은 실수를 하지 않는 것이 중요한 것 같다.

수정한 코드

<div>
 {this.props.list.map( x => {
   return (     
      <Component />
</div>
 )})}

• 결론적으로 통신 문제라기보다는 내가 짠 코드의 구조 문제였다.

• 현재까지는 간단한 데이터를 주고받는 통신이지만 기능에 따라, 그리고 데이터 양에 따라 코드 구조에도 영향을 미치는 경우가 많다고 한다. 프로젝트 시작 단계에서 데이터 구조를 잡아놓고 하는 것과 그렇지 않은 것은 정말 차이가 클 것 같은 느낌이 들었다.