남기면 좋잖아

11. 리액트 기초 익히기(5) 본문

Programming/JavaScript

11. 리액트 기초 익히기(5)

Beautiful Hugo 2020. 8. 23. 22:46
반응형

DRF-React Study

Chapter 9. 리액트 기초 익히기

CSS를 적용하는 다양한 방법

  • 리액트에서의 CSS

    • 전통적인 방법
      • CSS를 별도 파일에 저장
      • link태그를 통해 웹페이지에 포함
      • 이는 전역설정이 되며 컴포넌트 간에 예기치 않은 스타일이 적용될 수 있음
    • 컴포넌트 중심으로 생각하고 CSS도 컴포넌트 내부에서 관리/적용
  • CSS파일을 직접 적용

    • 나중에 import한 css파일로 덮어씌워질 수있음
  • css-module 활용

    • 모듈방식으로 접근하기에 클래스명 중복을 방지할 수 있음
  • Sass 활용

    • 설치
      • yarn add --dev node-sass
    • 변수, 연산, 믹스인/인자, 중첩, 문자 보간, 임포트, 각종 함수 등을 지원
    • 나머지는 css module 방식과 동일
  • css-in-js 라이브러리 중 styled-component 활용

    • CSS코드를 JS 코드로 관리할 수 있다는 장점

    • 설치

      • yarn add --dev styled-component
    • import React from 'react';
      
      class Wrapper extends React.Component {
        render() {
          return (
            <section style={{ padding: '4em', background: 'papayawhip' }}>
              {this.props.children}
            </section>
          );
        }
      }
      
      class Title extends React.Component {
        render() {
          const fontSize = this.props.isBig ? '3em' : '1.5em';
          return (
            <h1 style={{ fontSize, textAlign: 'center', color: 'palevioletred' }}>
              {this.props.children}
            </h1>
          );
        }
      }
      
      function App2() {
        return (
          <Wrapper>
            <Title>Random Chatting</Title>
          </Wrapper>
        );
      }
      
      export default App2;
      

Todo list 만들어보기

  • import React from 'react';
    import { Input, List } from 'antd';
    
    // class TodoItem extends React.Component {
    //   render() {
    //     const { todo } = this.props;
    //     return <li>{todo}</li>;
    //   }
    // }
    
    // const TodoItem = ({ todo }) => <li>{todo}</li>;
    
    class TodoList extends React.Component {
      state = {
        todoList: ['파이썬 익히기', '장고'],
        current: '',
        flag: [true, -1],
      };
      onChange = (e) => {
        const { value } = e.target;
        this.setState({
          current: value,
        });
        console.log(value);
      };
      onKeyDown = (e) => {
        if (e.keyCode === 13) {
          const { todoList, current, flag } = this.state;
          if (current.trim().length > 0) {
            if (flag[0] === true) {
              this.setState({
                current: '',
                todoList: [...todoList, current.trim()],
              });
            } else {
              todoList[flag[1]] = current.trim();
              this.setState({
                current: '',
                todoList: [...todoList],
                flag: [true, -1],
              });
            }
          }
        }
      };
      update = (index) => {
        const { todoList } = this.state;
        this.setState({
          current: todoList[index],
          flag: [false, index],
        });
      };
      delete = (index) => {
        const todo = this.state.todoList;
        todo.splice(index, 1);
        this.setState({
          todoList: [...todo],
        });
      };
      render() {
        return (
          <div style={{ width: '500px', margin: '30px auto' }}>
            <List
              header={'Todo List'}
              dataSource={this.state.todoList}
              bordered={true}
              renderItem={(todo, index) => (
                <List.Item actions={[<a onClick={() => this.delete(index)}>X</a>]}>
                  <div onClick={() => this.update(index)}>{todo}</div>
                </List.Item>
              )}
              style={{
                marginBottom: '4px',
              }}
            />
            <Input
              type="text"
              value={this.state.current}
              placeholder="할일을 입력하세요"
              onChange={this.onChange}
              onKeyDown={this.onKeyDown}
            />
          </div>
        );
      }
    }
    
    export default TodoList;
    
반응형

'Programming > JavaScript' 카테고리의 다른 글

11. 리액트 기초 익히기(6)  (0) 2020.08.23
11. 리액트 기초 익히기(4)  (0) 2020.08.13
11. 리액트 기초 익히기(3)  (0) 2020.08.12
11. 리액트 기초 익히기(2)  (0) 2020.08.12
11. 리액트 기초 익히기  (0) 2020.08.10
Comments