React #5

• node_modules에서 라이브러리 불러오기
  • 터미널
  • yarn add open-color include-media
  • oc는 open-color가 있어야 한다 터미널에 추가 해야 한다

  .SassComponent{
    display: flex;
    background: $oc-gray-2;
    @include media('<768px'){
      background: $oc-gray-9;
    }
  

  해시값이 나온다
• 
• 두 개의 클래스 네임을 사용 하고자 할 때 빽틱을 사용한다(빽틱을 사용하지 않는다면 .join을 써야한다
• <div className={cx("wrapper", "inverted")}> 안녕하세요 저는 <span className="something">CSS Module!</span> </div>
• classname
  • active, disabled, selected, checked
  • 터미널
    • yarn add classnames
  • classnames에 내장되어 있는 bind함수를 사용하면 사전에 미리 styles에서 받아온 후 사용 하게 끔 설정해 두고 cs(’클래스 이름’,’클래스이름2’)형태로 사용할 수있습니다.
  • 코드
  • import React from "react"; import styles from "./CSSModule.module.scss"; import classNames from "classnames/bind"; const CSSModule = () => { //active //disabled, selected, checked const cx = classNames.bind(styles); return ( // <div className={`${styles.wrapper} ${styles.inverted}`}> // 안녕하세요 저는 <span className="something">CSS Module!</span> // </div> <div className={cx("wrapper", "inverted")}> 안녕하세요 저는 <span className="something">CSS Module!</span> </div> ); }; export default CSSModule;
• styled-components
  • 라이브러리를 추가하면 자바스크립트 파일안에 css, scss확장 자를 가진 파일을 따로 만들지 않고 하나의 자바스크립트 안에서 스타일을 쓸 수 있다.
  • 터미널
    • tarn add styled-components
    • 플러그인 추가(vscode-styled-compnents)
• Tagged템플릿 리터럴
  • 백틱을 사용한 문법을 tagged 템플릿 리터럴이라고 한다.
  
• 반응형 디자인
  • css를 사용할 떄와 똑같이 media쿼리를 사용한다
  • 코드
  • import React from "react"; import styled, { css } from "styled-components"; const Box = styled.div` /*props로 넣어 준 값을 직접 전달해 줄 수 있습니다*/ background: ${(props) => props.color || "blue"}; padding: 1rem; display: flex; //p248 추가한내용---------------------------- width: 1024px; margin: 0 auto; @media (min-width: 1024px) { width: 1024px; } @media (min-width: 768px) { width: 768px; } //p248 추가한내용---------------------------- `; con
• 10장 일정관리 프로젝트
  • 프로젝트 생성 및 라이브러리 설치
    • 터미널
      • yarn create react-app todo-app
      • cd todo-app
      • yarn add sass classnames react-icons
    • Prettier설정
      • 코드
      • { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 }
    • 리액트 개발자 도구
      • https://chrome.google.com/webstore/category/extensions
      • React Developer Tools
  • UI 구성하기
    • TodoTemplate
      • 화면을 가운데 정렬시켜주며, 앱 타이블을 보여줍니다.
      • children으로 내부 jsx를 props로 받아와서 렌더링해줍니다.
    • TodoInsert
      • 새로운 항목을 입력하고 추가할 수 있는 컴포너트 입니다. state를 통해 인풋의 상태를 관리합니다
    • TodoListItem
      • 각 할일 항목에 대한 정보를 보여주는 컴포넌트입니다. todo객체를 props로 받아와서 상태에 따라 다른 스타일의 ui를 보여줍니다
    • TodoList
      • todos배열을 props로 받아 온 후, 이를 배열 내장 함수 map을 사용해서 여러개의 todoListItem컴포넌트로 변환하여 보여줍니다.
• 11장 컴포넌트 성능 최적화
  • React.memo를 통한 컴포넌트 리렌더링 성능 최적화
  • onToggle과 onRemove가 새로워지는 현상 방지하기
  • todo.id === id ? { ...todo, checked: !todo.checked } : todo,
  • …을 쓰는 것은 복제(clone)의 개념으로 불변성을 지키는 방법 이다
  • react-virtualized
  • node_modules에서 라이브러리 불러오기
    • 터미널
    • yarn add open-color include-media
    • oc는 open-color가 있어야 한다 터미널에 추가 해야 한다

    .SassComponent{
      display: flex;
      background: $oc-gray-2;
      @include media('<768px'){
        background: $oc-gray-9;
      }
    

    해시값이 나온다
  • 
  • 두 개의 클래스 네임을 사용 하고자 할 때 빽틱을 사용한다(빽틱을 사용하지 않는다면 .join을 써야한다
  • <div className={cx("wrapper", "inverted")}> 안녕하세요 저는 <span className="something">CSS Module!</span> </div>
  • classname
    • active, disabled, selected, checked
    • 터미널
      • yarn add classnames
    • classnames에 내장되어 있는 bind함수를 사용하면 사전에 미리 styles에서 받아온 후 사용 하게 끔 설정해 두고 cs(’클래스 이름’,’클래스이름2’)형태로 사용할 수있습니다.
    • 코드
    • import React from "react"; import styles from "./CSSModule.module.scss"; import classNames from "classnames/bind"; const CSSModule = () => { //active //disabled, selected, checked const cx = classNames.bind(styles); return ( // <div className={`${styles.wrapper} ${styles.inverted}`}> // 안녕하세요 저는 <span className="something">CSS Module!</span> // </div> <div className={cx("wrapper", "inverted")}> 안녕하세요 저는 <span className="something">CSS Module!</span> </div> ); }; export default CSSModule;
  • styled-components
    • 라이브러리를 추가하면 자바스크립트 파일안에 css, scss확장 자를 가진 파일을 따로 만들지 않고 하나의 자바스크립트 안에서 스타일을 쓸 수 있다.
    • 터미널
      • tarn add styled-components
      • 플러그인 추가(vscode-styled-compnents)
  • Tagged템플릿 리터럴
    • 백틱을 사용한 문법을 tagged 템플릿 리터럴이라고 한다.
    
  • 반응형 디자인
    • css를 사용할 떄와 똑같이 media쿼리를 사용한다
    • 코드
    • import React from "react"; import styled, { css } from "styled-components"; const Box = styled.div` /*props로 넣어 준 값을 직접 전달해 줄 수 있습니다*/ background: ${(props) => props.color || "blue"}; padding: 1rem; display: flex; //p248 추가한내용---------------------------- width: 1024px; margin: 0 auto; @media (min-width: 1024px) { width: 1024px; } @media (min-width: 768px) { width: 768px; } //p248 추가한내용---------------------------- `; con
  • 10장 일정관리 프로젝트
    • 프로젝트 생성 및 라이브러리 설치
      • 터미널
        • yarn create react-app todo-app
        • cd todo-app
        • yarn add sass classnames react-icons
      • Prettier설정
        • 코드
        • { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 }
      • 리액트 개발자 도구
        • https://chrome.google.com/webstore/category/extensions
        • React Developer Tools
    • UI 구성하기
      • TodoTemplate
        • 화면을 가운데 정렬시켜주며, 앱 타이블을 보여줍니다.
        • children으로 내부 jsx를 props로 받아와서 렌더링해줍니다.
      • TodoInsert
        • 새로운 항목을 입력하고 추가할 수 있는 컴포너트 입니다. state를 통해 인풋의 상태를 관리합니다
      • TodoListItem
        • 각 할일 항목에 대한 정보를 보여주는 컴포넌트입니다. todo객체를 props로 받아와서 상태에 따라 다른 스타일의 ui를 보여줍니다
      • TodoList
        • todos배열을 props로 받아 온 후, 이를 배열 내장 함수 map을 사용해서 여러개의 todoListItem컴포넌트로 변환하여 보여줍니다.
  • 11장 컴포넌트 성능 최적화
    • React.memo를 통한 컴포넌트 리렌더링 성능 최적화
    • onToggle과 onRemove가 새로워지는 현상 방지하기
    • todo.id === id ? { ...todo, checked: !todo.checked } : todo,
    • …을 쓰는 것은 복제(clone)의 개념으로 불변성을 지키는 방법 이다
    • react-virtualized