패스트캠퍼스 챌린지 12일차 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online

2022. 2. 4. 08:52공부/패스트캠퍼스

수강 인증샷


패스트캠퍼스 챌린지란?

 패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.


12일차

 12일차에는 Part 1. React 기초 Ch 01. React 맛보기 챕터에서 19. 리액트 Element에 스타일 입히기 강의 내용에 대해 기록하려 한다.

 Part 1. React 기초 Ch 01. React 맛보기 챕터에서 19. 리액트 Element에 스타일 입히기 강의에서는 말 그대로 리액트 Element에 스타일 입히는 법에 대해 배우는 시간을 갖는다. 리액트 Element에 스타일을 입히는 방법은 Element에 props로 style 객체를 넣어주는 기본적인 방법부터 시작해서 라이브러리를 이용해 스타일을 입히는 방법 등 여러 가지 방법들이 존재하는데, 여기선 먼저 style 객체를 넣어주는 방법을 통해 스타일을 입히는 방법을 익힌다. 먼저, style 객체 안에 객체를 하나 더 넣어주고 카멜 케이스를 넣어주는 방법을 통해 스타일을 입혀준다. 예를 들어 원래의 CSS에서는 background-color와 같은 방식으로 배경의 색상을 지정해준다고 하면 React Element에서 배경 색상을 지정하는 객체를 넣어주고 싶을 땐, backgroundColor와 같은 방식으로 속성을 입력해야 한다. 또한, 부모 - 자식 간에 전달해주는 props를 통해 css 정보를 넘겨주고 싶을 때 주의해야 할 점에 대해서도 공부한다. 자식 컴포넌트에서 props를 받을 때 가공이 필요한 부분과 별도의 가공이 필요하지 않은 children과 같은 부분은 받아주는 인자에도 {...rest}와 같이 받아주고 엘리먼트 태그에도 {...rest}를 받아주면 가공이 필요한 부분을 제외하고 나머지 부분에 대한 props를 용이하게 처리할 수 있다.


본 게시글은 이벤트 참여를 위해 작성된 게시글입니다.

 


패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC