[React] 리액트 스타일링

위와 같이 div div div 엘리먼트에 스타일을 적용하게 되면 다른 div div div 에도 적용이 된다 따라서 리액트가 생성하는 HTML을 좀더 쉽게 스타일링 할수 있는 방법을 사용해 보도록 하자

 

1. 안쪽 div 엘리먼트에 letter라는 값의 class 속성을 갖게 하자

  >> 여기서 보면 class 가 아닌 className을 사용한것을 주의 깊게 보자

2. div div div 에 줬던 CSS 셀렉터를 .letter로 변경하자

 

 

** 리액트 방식의 스타일링

 - 리액트는 CSS를 사용하지 않는 인라인 방식의 스타일링을 선호한다.

 - 컴포넌트 안에 스타일을 지정하는 방법은 CSS 속성과 값을 콘텐츠로 갖는 객체를 정의 하는 것이다.

 

1. 스타일 객체 만들기

2. 만든 객체를 스타일링 하고자 하는 엘리먼트에 할당

 - 이 예제에서는 Letter 컴포넌트의 render 함수가 리턴하는 div 엘리먼트가 스타일링의 대상이다.

 - 지정하는 방법은 다음과 같다 

--JSX 안에 스타일을 정의하면 부모(컴포넌트의 소비자)를 통해 여러 스타일 값을 쉽게 커스터마이징 할 수 있기 때문이다.