[Comento React 실무PT] 3. 컴포넌트 디자인

스스로 이해한 내용으로 정리했음. 주관이 들어간 글임을 밝힘.

기본 내용 정리

이번에는 styled-component를 활용한 컴포넌트 디자인 적용을 다뤄보고, 추가로 Github 이슈관리를 알아본다.

styled-component

• 간단히 말하자면 css를 자바스크립트 내에서 작성할 수 있는 라이브러리

말 그대로 style이 입혀진 component이다. npm i styled-component로 라이브러리 설치가 가능하다.

자바스크립트 코드 내에서 css를 다룰 수 있으며, css 옵션이 들어간 JSX 컴포넌트를 만들 수도 있다.

나의 코드 중 일부분이다. Container라는 컴포넌트를 만든 것인데, 위 코드를 해석하면 대강 아래와 같다.

• html에서 section에 해당.
• isMobile이라는 Boolean 값을 인수로 받음. 나중에 <Container isMobile={true} /> 이런꼴로 사용해야함.
• 백틱 사이에는 css코드가 쓰임.
• 인수로 받은 isMobile은 css코드 내에서 ${}안에 props로 가져와서 사용가능하다.

이렇게 컴포넌트를 만들어서 components 폴더에 두고, 여러 다른 코드로 export해서 사용도 가능하다. 

Github Issue 활용법

이전에는 Github에서 Issue를 어떻게 활용하는지 몰랐는데, 이번주 수업에서 그 방법에 대해 알게되었다.

Github Issue는 무지성 코드짜기 대신 계획적인 코드짜기를 할 수 있게 도와준다.

일종의 할일 계획서라고 보면 된다.

위 사진은 issue를 만들어둔 내 repo의 모습이다. New issue에서 할일을 작성해두고나면, 이렇게 issue가 open된다. 할일을 완료했다면 해당하는 커밋을 태그하든, merge한 브랜치를 태그하는 식으로 뭔가 했다! 한 다음에 issue를 close하면 된다. 

그러면 대강 위처럼 issue에 기록이 남는다. 

---

[코멘토 바로가기] https://bit.ly/3D9XCOz