TIL - 20220611

 오늘은 코드숨 리액트 6주차 과제의 풀이 영상을 시청했다. 과제 풀이 영상을 보며 느낀 점은 관심사의 분리를 UI와 상태 관련 측면으로 간단한 페이지일지라도 분리해야 하고, UI에서도 반복적으로 사용하는 부분이 있다면 분리를 하는 것이 재사용하기에 유리하다는 점이다. 이번 과제를 진행하면서 식당의 정보를 출력하는 페이지는 비교적 간단한 페이지에 속한다고 생각해서 UI와 상태 관리를 나눠서 만들지 않았는데, 영상에서 아샬님은 먼저, 상태 관련 컴포넌트인 Container 컴포넌트와 UI 관련 컴포넌트로 분리하면서, UI 관련 컴포넌트에서도 식당의 목록들은 또 분리하여 식당을 배열로 받았을 때, 아무것도 없을 땐 메뉴가 없다는 문구를 출력하고, 있다면 map을 이용하여 배열을 출력하는 컴포넌트를 만드시는 모습을 보면서 확실히 식당 메뉴와 같이 한 배열을 받아 여러 문구를 반복적으로 출력하는 것들은 분리하는게 코드를 더욱 간결하게 만들고 한 컴포넌트가 책임지는 요소를 덜어주기 때문에 관리 측면에서도 유리하다는 것을 배우게 됐다. 앞으로 UI와 상태 관련은 무조건 분리를 하자, 그게 간단한 화면일지라도. 그렇게 나누어 상태 관련 Container 컴포넌트는 테스트할 때, Container에 들어가는 값을 테스트하고, UI 관련 컴포넌트는 UI에 나와야 하는 텍스트를 테스트하도록 해야겠다.