React.js - 리액트 스타일링

 

 

 

 

1. 기존 CSS를 적용하는 방식

 

 

CSS 파일을 만든 후 그 후 CSS 클래스를 작성해 적용하는 방식으로 엘리먼트에 "className"이라는 속성을 추가해서 작성한 클래스를 넣는 방식.

 

(className 속성의 대한 참조 : https://ko.reactjs.org/docs/dom-elements.html#classname)

 

 

2. 스타일 객체를 만들어 스타일링

 

 

리액트 방식의 스타일링은 주로 "인라인 방식"의 스타일링을 선호한다. 그 이유는 비주얼 컴포넌트의 재사용성을 더욱 높이는 방법이다.

 

스타일을 객체로 사용할 때는 JSON형식으로 객체 생성을 하고 작성은 기존 CSS의 사용하던 대시(-)를 빼고 기존 대시(-)로 연결된 대시 다음에 있는 문자를 대문자로 사용해 카멜 표기법(Camel Case)로 작성한다.(예 : font-family를 fontFamily로...)

 

그 후 자신이 작성한 스타일 객체를 적용하고 싶은 Element에 "style"이라는 속성을 추가해 꼭 "중괄호 표현식"으로 객체를 넣어 리액트가 인식하게 해준다. 

 

 

3. 커스터마이징 스타일링

 

 

기존 객체를 이용해 스타일링 했던 방식에서 부모 컴포넌트에서 속성을 추가해 "this.props.[attribute]"로 스타일링을 개별적으로도 할 수 있다.

 

예를들어 위 예제에서 여러개의 같은 컴포넌트를 사용했을 때 각각의 배경색을 커스터마이징 하고 싶다면 컴포넌트에 "bgcolor"라는 속성을 추가 한 뒤 컴포넌트에서 생성한 스타일 객체의 "backgroundColor"에 "this.props.bgcolor"를 넣어 부모 객체에서 속성을 전달할 수도 있다.