리액트 써먹는 법을 깨닫다

오늘 새벽 찡찡찡찡 거리면서 썼던 이번 작업 회고다. 컴포넌트 분리와 스타일링에 대한 고민을 했었다. 어찌 보면 기초의 기초의 기초를 모른다고 봐도 무방한,,,

 

컴포넌트 분리를 통해, 유지 보수 용이와 재사용성을 늘리는 것이 리액트의 장점이라고 하는데..... 나는 이런 거 1도 생각 안 하고 그냥 들이박으면서 개발을 하니 기본적인 것도 몰랐던 것이다. 그래서 복잡하게 생각 말고 기본으로 돌아가기로 했다.

 

그냥 유지 보수하기 편한 만큼까지만 완성하고 분리시켜 버리자!

 

 

 

 

일단 페이지에 구현할 내용을 하드코딩으로 때려 박고 CSS까지 전부 적용한다.

 

 

 

 

그리고 완성된 코드를 그대로 복사해서 새로운 컴포넌트를 생성한다. Header 포지션에 위치하기에 컴포넌트 이름을 Header로 설정했다.

 

 

 

 

왼쪽 : 변경 전, 오른쪽 : 변경 후

기존의 코드를 지우고 새로 생성한 Header 컴포넌트를 넣어준다. 왼쪽의 코드와 비교하면 훨씬 깔끔해졌음을 알 수 있다.

 

다른 모든 사람들은 처음 배울 때부터 이렇게 써왔던 거 같은데, 나만 몰랐다 ㅎㅎ 이제라도 알았으니 잘 써먹어야지