이제 여러분이 탄탄한 기초와
컴포넌트를 어떻게 만들어야 하는지
어떻게 컴포넌트와 작업해야 하는지 등에 대한
이해를 갖추었으니 이제는
일반적으로 컴포넌트와 리액트 앱을 스타일링하는 것을 살펴볼 시간입니다
당연히 이것은 css 강좌가 아닙니다
따라서 이 강좌는
그리고 이 섹션은 여러분에게 css를 가르치는 것이 아닙니다
여러분이 css에 대해 더 알고 싶다면
이에 대한 전용 강좌가 있습니다
그러나 당연히 리액트 개발자로서
여러분은 어떻게 일반적으로 여러분의 리액트 컴포넌트에
css를 적용할지를 알아야 합니다
왜냐하면 이 섹션에서 배울 것처럼
리액트 없는 컴포넌트를 스타일링할 때
다른 장점과 단점에 대한
다른 옵션들이 존재하기 때문입니다
따라서 이 섹션에서 여러분은
Vanilla CSS를 통해 리액트 앱을 스타일링 하는 것을 살펴볼 것입니다
따라서 그냥 CSS로
어떤 특별한 추가 패키지나 기능 없이 말입니다
그리고 나서 우리는
몇 가지 더 심화된 기술과
우리의 컴포넌트를 스타일링하기 위한
추가 패키지도 살펴볼 것입니다
예를 들어 css 모듈을 사용하여 특정 컴포넌트에
스타일을 적용하는 방법을 배울 것입니다
또한 이 섹션에는 스코핑이 무엇인지에 대한 이해도 얻을 것입니다
또한 여러분은
Styled Components 라 불리는
자바스크립트 스타일링 패키지의 유명한 css에 대해서도 배울 것입니다
그리고 여러분은
그것이 어떻게 작동하고 어떤 장점들이 있는지도 배울 것입니다
그리고 당연히 이 모든 접근들에 대한
단점도 말입니다
그리고 저는 여러분에게 Tailwind CSS를 소개하고
이를 가지고 리액트 앱을 스타일링 하는 것도 알려줄 것입니다
이것은 리액트 애플리케이션을 스타일링 하는 데 있어
인기 있는 선택지입니다
당연히 이 모든 서로 다른 접근에 대해
저는 여러분에게 어떻게
절대 변경되지 않는 정적인 스타일과
특정 조건들이 맞았을 때만
적용되어야 할
동적인 혹은 조건부적인 스타일을 적용해야 할지 알려줄 것입니다
그리고 기본적으로 강좌의 모든 섹션과 같이
이 과정도 초기 프로젝트와 함께 시작합니다
로컬 버전도 있고
여러분이 원한다면 CodeSandbox의 링크 버전으로
첨부되어있는 것을 찾을 수 있습니다
항상 만약 여러분이 로컬 버전을 사용한다면
다운로드 하고 추출하고
모든 의존성을 다운하기 위해 run npm install 하고
개발자 서버를 시작하기 위해
npm run dev를 합니다
CodeSandbox 솔루션을 사용한다면
이러한 것은 필요하지 않습니다
그러면 여러분은 여기에 웹페이지를 렌더링하는
초기 프로젝트를 가지게 됩니다
여기 웹 페이지는 작동하지 않는다는 점 말씀드립니다
Create a new account (새계정 생성)을 클릭해도 아무것도 일어나지 않습니다
그리고 여기에 유효한 증명을 입력하고
Sign in (로그인) 을 누르더라도 아무것도 일어나지 않습니다
그러나 예를 들어 유효하지 않은 증명을 입력하면
sign in (로그인) 하고자 한다면
이 유효하지 않은 입력 필드가 하이라이트 되며
붉은 배경과 붉은 바깥 선이 생깁니다
따라서 우리는 여기서 조건에 따라 적용된
몇 가지 스타일을 가지고 있습니다
물론 여러분은 이 웹페이지가 이미
어떤 스타일들이 적용되었다고 아셨을 겁니다
비록 이것이 그냥 초기 프로젝트더라도 말입니다
그러나 일단 이 페이지는 단순히 vanilla css를 활용합니다
한 가지 css 파일을 활용하여
전체 페이지에 스타일을 적용하고
그것이 우리가 다음 강의부터 시작하고자 하는 것입니다