React Style 방식 - React 튜토리얼 2

React는 기존의 CSS 파일을 적용하는 것도

가능하게 되있습니다만, 그렇게 하면

Component를 독립시키는 React의 장점을

활용하지 못하는 느낌이 들기 때문에 여기서는

React의 Style 방식에 대해서 알아보겠습니다.

 

아래의 Component는 div에 자식요소를 출력합니다.

        class Letter extends React.Component {
            render(){
                return (
                    <div>
                        {this.props.children}
                    </div>
                );
            }
        }

 

 

destination  은 <div id="container"></div> 입니다.

 

ReactDom으로 다음과 같이 rendor 하면

브라우저에서 보면 div 안에 div 가

들어가 있습니다. 기존의 CSS에서는

div div { } 선택자를 사용하거나

#container div { }  이런 선택자를

정의할 수 있을 겁니다.

        var destination = document.querySelector("#container");

        ReactDOM.render(
            <div>
                <Letter>가</Letter>
                <Letter>나</Letter>
                <Letter>다</Letter>
                <Letter>라</Letter>
            </div>, destination
            
        );

 

Letter Component안에 스타일을

정의할 수 있습니다. var letterStyle 변수의

속성에 보면 CSS의 문법과 유사합니다.

padding이나 margin 처럼 한 단어로

된 경우 그대로 사용하고 값부분은 " " 따옴표로

감쌉니다. background-color 같이 두 단어

사이에 대쉬 - 가 있는 경우는 lowerCamel case로

바꾸면 됩니다. 특이하게 픽셀 단위는 px 표시를

생략해도 되는데 em같은 상대단위를 쓴다면

그냥 " " 따옴표로 쓸 수 밖에 업습니다.

 

이것을 보면 React 페이지를 만들기 위해서도

최소한의 CSS 지식이 필요하다는 것을 알 수 있습니다.

 

        class Letter extends React.Component {
            render(){

                var letterStyle = {
                    padding: ".5em",
                    margin: ".3em",
                    backgroundColor: this.props.bgcolor,
                    display: "inline-block",
                    border: "1px solid black"
                };
                return (
                    <div style={letterStyle}>
                        {this.props.children}
                    </div>
                );
            }
        }

 

Component는 class 이기 때문에

this의 속성을 추가해서 사용할 수 있는데요.

위에서 this.props.속성이름 으로 추가한 후에

JSX에다가 아래와 같이 사용할 수 있습니다.

테마 색상 등이 들어있는 클래스를 만들어서

관리하는 것도 가능합니다.

 

<Letter bgcolor="#49DD8E">나</Letter>
<Letter bgcolor={myColor}>다</Letter>

 

전체 예제코드는 아래 코드펜과 같습니다.

 

See the Pen React style by jayonk (@jayonk) on CodePen.

 

 

*포인트는 Component 안에 Style을

모두 집어넣고 사용할 수 있기 때문에

여러 CSS 파일을 왔다갔다 할필요가

없다는 점이고 전체 레이아웃에 적용하도록

연구를 잘 하면 코드의 재사용성이 높아집니다.

 

물론 기존 방식의 CSS에 적용하는 것도 가능합니다.