close
프로필 배경
프로필 로고

코규리

✏️ 개발 공부/ETC · 2022. 1. 5. fullscreen 넓게보기

[React] 2: 컴포넌트 스타일링, 컴포넌트를 보다 복잡하게 다루어보기

React에 대한 개인학습을 기록합니다.

 

 

 

체크리스트

☑ TITLE
✔ 연습용 레포 생성
✔ 리액트 개요 확인
✔ JSX다루기
✔ 리액트 컴포넌트
✔ 리액트 스타일링
✔ 컴포넌트 복잡하게 다루기
  속성 전달
  JSX 복잡하게 다루기
  상태 다루기, 카운터 설정
  데이터를 UI로 불러오기
  이벤트 다루기
  컴포넌트 생명주기 (생명주기 메소드)
  DOM 엘리먼트 접근하기
  라우터를 통한 싱글 페이지 앱 구축
  Todo list 앱 제작
  리액트 개발 환경 구성

 

 

 

4. Rreact 스타일링

4.1. 개요

4.1.1. CSS(cascading Style Sheets)에 대하여

  • 콘텐츠와 프레젠테이션 사이를 잘 분리할 수 있음
  • 셀렉터(selector)문법을 통해 스타일 적용과 건너뛸 엘리먼트를 유연하게 선택하도록함

4.1.2. 리액트가 가진 콘텐츠 스타일 적용 견해 (vs CSS)

  • 앱의 비주얼 부품은 독립적이며 재사용 가능해야 한다
  • HTML엘리먼트와 js를 컴포넌트 하나에 담았던 이유이다.

4.1.3. HTML 엘리먼트에 스타일 적용법

  • 어떤 UI컴포넌트를 위한 스타일이 다른 곳에 있따면 독립적 UI컴포넌트가 될 순 없다
  • 리액트가 HTML과 JS의 바로 옆에서 엘리먼트 스타일 지정을 권하는 이유이다.

⇒ 콘텐츠에 스타일을 지정하는 방식을 알아보자

⇒ CSS 사용 방식도 같이 알아보자

⇒ 언제나 두 방식 모두를 사용할 수 있다

 

4.2. 실습: 영어 모음 보여주기

4.2.1. 초기 코드

<!DOCYPE html>
<html>

<head>
    <title>kyuStyle in React</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.Cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <style> //기본 스타일
        #container {
            padding: 50px;
            background-color: #FFF;
        }
    </style>
</head>

<body>
    <div id="container"></div>
</body>
</html>
  • 리액트와 바벨 라이브러리를 로드한 상태
  • container란 id값을 가진 div를 지정한 상태

4.2.2. 화면에 모음 글자를 보여주기 위한 React코드 추가

<div id="container">
        <script type="text/babel">
            var Letter = React.createClass({
                render: function() {
                    return (
                        <div>
                            {this.props.children}
                        </div>
                    );
                }
            });

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

            ReactDOM.render(
                <div>
                    <Letter>G</Letter>
                    <Letter>Y</Letter>
                    <Letter>U</Letter>
                    <Letter>R</Letter>
                    <Letter>Y</Letter>
                </div>,
                destination
            );
        </script>
    </div>
  • div엘리먼트 안에 각 모음 글자를 감싸는 Letter 컴포넌트 제작
  • script태그를 통해 HTML에 고정되어 있음
  • 바벨이 이해할 수 있는 형태로 작성됨

4.3. CSS를 사용한 리액트 콘텐츠 스타일링

4.3.1. 이전 HTMl 내용 이해하기

//ReactDOM기반 render메소드 내용
<div>
  <Letter>G</Letter>
  <Letter>Y</Letter>
  <Letter>U</Letter>
  <Letter>R</Letter>
  <Letter>Y</Letter>
</div>
// Letter 컴포넌트 안 render 메소드
<div>
	{this.props.children}
</div>
  • div를 포함한 여러 JSX코드 조각이 아래와 같이 HTML로 바뀐다. (ft. 개발자모드)

4.3.2. Letter 값에 class 속성을 가지도록 하기

var Letter = React.createClass({
                render: function() {
                    return (
                <div className="letter"> {/* 클래스 속성 가지도록 만들기 */}
                            {this.props.children}
                        </div>
                    );
                }
            });
  • class가 아닌 className
    • className은 JS의 특별한 키워드임

4.3.3. 리액트 방식의 스타일링 하기: 스타일 객체 만들기

//기존의 css혀식
.letter {
    padding: 10,
    margin: 10,
    background-color: "#ffde00",
    color: "#333" ,
    display: "inline-block",
    font-family: "monospace",
    font-size: 32,
    text-align: "center"
}

//JS
render: function() {
	var letterStyle = {
    padding: 10,
    margin: 10,
    backgroundColor: "#ffde00",
    color: "#333" ,
    display: "inline-block",
    fontFamily: "monospace",
    fontSize: 32,
    textAlign: "center"
	};
  • CSS속성을 JS방식으로 변환하는 공식
    • 한 단어의 CSS속성(padding, margin, color 등)은 그대로 쓰기
    • 대시로 연결된 여러 단어의 CSS은 카멜 표기법으로 바꿔주기
    • ex) font-family → fontFamily
  • 접미사 ‘px’ 는 생략하여 작성하고 있음
    • 리액트는 자동으로 px를 붙여줌.
    • 숫자 값을 갖는 속성이지만 리액트가 픽셀 접미사를 자동으로 붙이지 않는 속성
      - columnCount, fillOpacity, flex, flexGrow, flexShrink, fontWeight, lineClamp, lineHeight, opacity, order, orphans, windows, zIndex, zoom

4.3.4. 리액트 방식의 스타일링하기: 콘텐츠 스타일링하기

//기존 코드
return (
    <div className="letter"> {/* 클래스 속성 가지도록 만들기 */}
        {this.props.children}
    </div>
);

//수정 코드
return (
    <div style={letterStyle}> {/* 클래스 속성 가지도록 만들기 */}
        {this.props.children}
    </div>
);

각 스타일이 인라인으로 적용되어있음

4.3.5. 배경색 커스터마이징

// render 안의 letterStyle 수정
backgroundColor: this.props.bgcolor,

// ReactDom.render메소드에서 bgcolor 속성을 추가하고 각 색을 지정
<div>
    <Letter bgcolor="#58B3FF">G</Letter>
    <Letter bgcolor="#FF605F">Y</Letter>
    <Letter bgcolor="#FFD52E">U</Letter>
    <Letter bgcolor="#49DD8E">R</Letter>
    <Letter bgcolor="#AE99FF">Y</Letter>
</div>,

4.4. 총정리

  • CSS스타일 규칙 사용법과는 다른, 리액트가 JS에서 인라인 방식으로 스타일링하는 방법이 있다
  • HTML과 닮은 XML문법을 통해 JS에서 UI통째로 선언하는 방법을 JSX로 배웠었다

 

5. 복잡한 컴포넌트 제작하기 : 컬러 팔레트

5.1. 비주얼 요소 식별하기

: 나는 사진자료가 없지만, 이렇게 글로 써놓은 것을 트리구조로 생각해보자.

  • 카드(큰 틀) 자체
    • 특정 컬러를 보여주는 사각형 영역
    • 헥스(16진수 색상코드)값을 보여주는 보다 작은 사각 영역
      1. 색상코드가 나타나는 레이블 영역
      2. 흰색 바탕 영역

5.1.1. 컴포넌트로 만들 비주얼 요소 선별 기법

  • 한 컴포넌트는 한 역할만 해야 한다
    • 만드려는 컴포넌트가 너무 많은 일을 하게 될 것 같다면 여러 컴포넌트로 쪼갬
    • 컴포넌트가 너무 적은 일을 하게 될 것 같으면 아예 비주얼 요소를 컴포넌트로 만들려 하지 않음
  • 위의 이론을 바탕으로면, 5.1.의 흰색 바탕 영역이 거슬린다
    • 단순히 빈공간이라고 생각하면 레이블에게 맡겨도 되는 역할이다
    • 즉, 흰색 바탕 영역은 컴포넌트가 될 수 없는 대상이었음.
  • 그러니, ‘카드 자체 영역’, ‘특정 컬러를 나타내는 사각형 영역’, ‘색상카드를 보여주는 레이블 영역’ 3가지가 최종 컴포넌트다.

5.2. 컴포넌트 작성하기

5.2.1. 초기코드

<!DOCYPE html>
<html>

<head>
    <title>Complicated-KyuComponent</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.Cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <style>
        #container {
            padding: 50px;
            background-color: #FFF;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script type="text/babel">

        ReactDOM.render(
            <div>

            </div>,
            document.querySelector("#container")
        );
    </script>
</body>
</html>

5.2.2. Card 컴포넌트 만들기

// Script 내의 Card 컴포넌트 작성
var Card = React.createClass({
    render: function(){
        var cardStyle = {
            hight: 200,
            width: 150,
            padding: 0,
            backgroundColor: "#FFF",
            WebkitFilter: "drop-sqdow(0px 0px 5px #666)",
            filter: "drop-shadow(0px 0px 5px #666)"
        };
        return(
            <div style={cardStyle}>
            </div>
        );
    }
});

//ReactDom.render수정
ReactDOM.render(
      <div>
        <Card/> {/* Card 추가해줌 */}
    </div>,
    document.querySelector("#container")
);

5.2.3. Square 컴포넌트 만들기

// Script 내의 Square 컴포넌트 작성

var Square = React.createClass({
      render: function() {
          var squareStyle = {
              height: 150,
              backgroundColor: "#FF6663"
          };
          return(
              <div style={squareStyle}>
              </div>
          );


      }
  });

// Card 컴포넌트 내의 return 수정
return(
    <div style={cardStyle}>
        <Square/> {/* square와 결합하기 */}
    </div>
);

5.2.4. Label 컴포넌트 만들기

// script 내의 Square 컴포넌트 작성
var Label = React.createClass({
    render: function() {
        var labelStyle = {
            fontFamily: "sans-serif",
            fontWeight: "bold",
            padding: 13,
            margin: 0
        };
        return( 
            <p style={labelStyle}>#FF6663</p> // 적용시키기
        );
    }
});

// Card 컴포넌트 내의 return 수정
return(
    <div style={cardStyle}>
        <Square/>
        <Label/>
    </div>
);

5.3. 속성 전달받을 수 있게 하기

//Square 컴포넌트에서 수정, 속성 전달 받도록
var squareStyle = {
    height: 150,
    backgroundColor: this.props.color //속성 전달받음
};

//Label 컴포넌트에서 수정,속성 전달 받도록
return( 
    <p style={labelStyle}>{this.props.color}</p> //속성 전달받음
);


//Card 컴포넌트에서 수정, 속성을 전달하도록(to. Square, Label)
return(
    <div style={cardStyle}>
        <Square color={this.props.color}/> {/* 속성전달 해 줌 */}
        <Label color={this.props.color}/> { /* 속성전달 해 줌 */}
    </div>
);

// ReactDom에서 색성 지정하도록 수정
<div>
    <Card color="#FFA737"/> {/* 속성 지정 */}
</div>,

 

 

 

 

저작자표시
✏️ 개발 공부/ETC 관련 글
더 보기

티스토리툴바