react + tailwindcss 로 만든 샘플사이트

지난번과 똑같은 디자인인데, 이번엔 리액트 + 테일윈드CSS로 만들어봤습니다.

확실히 리액트로 만들면 반복되는 작업들을 줄여줄 수 있다는 점이 가장 큰 장점인 것 같습니다.

섹션을 표현할때도 아래와 같은 상황이 생길 수 있습니다.

공통적인 부분이 많이 사용되는데요. 

어느정도 규칙성이 있죠?

조금 더 세부적으로 보면 아래와 같은 예시를 볼 수 있습니다. 

반복 되는 요소들이 보이시죠?

이런식으로 스타일을 정의해놓고 Testimonial과 Our Services 그리고 그 안에 필요한 내용들만 데이터로 전달해주면, 껍데기는 알아서 씌워주는 식으로 작동하게끔 해줍니다.

이렇게 컴포넌트 단위로 쪼개서 작업한다는 것이 리액트의 장점입니다.

UI를 재활용할 수 있는 단위로 만드는 것이죠.

위의 카드 스타일도 마찬가지입니다.

이미지, 타이틀, 본문이라는 요소는 공통적으로 작용하고, 버튼 유무만 따로 결정해주면 되죠.

미리 만들어놓은 UI덕분에 렌더링 - 화면에 그려낼때 필요한 건 데이터 - 타이틀, 본문, 이미지뿐입니다.

 

이번엔 intersection observation 이라는 자바스크립트 api를 활용해보았는데, 일반 바닐라 스크립트에서는 어떻게 작동하게끔 예시가 잘 되어있는데, 리액트에서는 작동시키는 방법이 좀 생소해서 어설프게 구현해보았습니다.

화면에서 해당 섹션이 바뀔때마다 섹션과 연결된 상단 메뉴가 활성화되도록 적용해봤습니다.

샘플 사이트는 아래 링크에서 확인할 수 있습니다.

http://marketing-kohl-one.vercel.app

 

CSS를 어떻게 설계해서 잘 쓰느냐에 따라서도 충분히 HTML/CSS만으로도 구현가능한 부분이지만, HTML이 길어지고 커질 수록 뭔가 어디서 무엇이 어떻게 쓰였는지 파악하기가 어렵다는 것이 단점입니다.

하지만 리액트는 위와 같이 코드를 간결하게 단위별로 묶어서 관리해줄 수 있어서 유지보수할때도 무엇이 어디있는지 찾기가 수월합니다. 처음부터 복잡하게 계층으로 나뉘어있는 HTML 문서 구조 깊이 들어가 찾아봐야하는 상황과는 많이 다르죠.

 

물론 이런 것들을 쉽게 관리하도록 도와주는 pug와 같은 html template 도구들도 있습니다. 먼저 일하던 회사에서는 리액트를 도입할 수 없는 환경이라 pug + scss + webpack + es6 조합으로 많이 사용했었어요.

 

이렇게 리액트 말고도 Pug나 handlebars 등 좋은 도구들이 많기 때문에 프로젝트 성격에 따라서 잘 활용해보면 요긴하게 쓰일 수 있습니다.