React - 스타일링

숙제 - onToggle, onRemove

import { useCallback, useReducer, useRef, useMemo, useState, useEffect } from 'react';
import CreateUser from './Hook/CreateUser';

function countActiveUsers(users) {
  console.log('활성 사용자 수를 세는 중....');

...

function reducer(state , action) {
  switch
  ...
    case 'CREATE_USER':
      return {
        inputs: initialState.inputs,
        users: state.users.concat(action.user)
      }
    case 'TOGGLE_USER':
      return {
        ...state,
        users: state.users.map(user => user.id === action.id ? { ...user, active: !user.active } : user )
      }
    case 'REMOVE_USER':
      return {
        ...state,
        // 전달된 값의 id와 같지 않다면 배열에 넣겠다.
        users: state.users.filter(user => user.id !== action.id)
      }
    default:
      return state;
  }
  
}

function App() {

...

  const count = useMemo(() => countActiveUsers(users), [users]);

  const onChange = useCallback ((e) => {
...
  }, []);

  const onCreate = useCallback (() => {
...
    nextId.current += 1;
  }, [username, email]);

  const onToggle = useCallback ((id) => {
    dispatch({type: 'TOGGLE_USER', id});
  }, []);

  const onDelete = useCallback ((id) => {
    dispatch({type: 'REMOVE_USER', id});
  }, []);

  return (
    <div className="App">
      <Count />
...   {onCreate}  />
      <UserList users={users} 
      onToggle={onToggle} onRemove={onDelete} />

      <div> 활성 사용자수 : {count}</div>
    </div>
  );
}

export default App;

• customHook 만들기
  • 반복 로직을 쉽게 만들기 위함, 아래 코드 참조!

  // 반복적인 input을 관리하는 코드를 훅으로 만들기
  import React, { useCallback } from "react";
  
  function useInputs(initialForm) {  // 훅으로 사용하려고 하는데, state 확인 정보를 갖고 있지 않아 모든 state를 허용하기 위해 initialForm으로 받는다
  
      const [form, setForm] = React.useState(initialForm);
      const onChange = (e) => {
          const { name, value } = e.target;
          setForm({
              ...form,
              [name]: value,
          });
      };
      // 초기화
      const reset = useCallback(() => setForm(initialForm), [initialForm]);
      
      return [form, onChange, reset];
  }
  export default useInputs;
  
  

  • app.js 추가 → 쌤 깃허브 참고하시오
• 리액트 스타일링
  1. 태그에 직접 지정
  2. 일반 css 파일로 적용
  3. css 모듈로 적용하기
  4. public 폴더에 css 디자인
• css 파일 이름 규칙
  • 컴포넌트의 이름을 반드시 포함해서 만드는 것을 추천
  • ex) app.js → app.css 로 넣는 것을 추천
  1. tag에 직접지정하기
     • 태그에 직접 디자인을 적용할 때는 {}로 묶어야 한다.
     • css 속성 중 ‘- ‘은 카멜표기법으로 대체.. ex) background-color = (카멜)> backgroundColor

     <input style = {color:'white',textAlign:'center'}/> 
     text-align -> textAlign
     

  2. 일반 CSS문법으로 디자인 해주면 import로 가져와서 사용!
     • [App.js]에서는 위에 있는 App.css를 import하여 디자인 적용 import './App.css';
  3. .App-header { '.'은 클래스를 의미, 클래스 App-header background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white; }
  4. CSS 모듈 사용하기
     • 파일은 컴포넌트명.module.css형식으로 만듦
     • css 파일은 import 구문으로 가져옴
     • 이 방식은 선택자에 고유한 해시값을 부여함으로 다른 파일과 디자인의 중복을 막아줌
     • :global 키워드를 이용해서 전역 선택자(이름) 선언 가능
• Saas
  • Sass(Syntactically Awesome Style Sheets)는 CSS pre-processor로, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 아니라 코드 가독성을 높여주어 유지보수를 쉽게 합니다.
  • Sass는 두가지 확장자를 갖고 있다. : .scss, .sass ⇒ 참조방법은 아래 링크 참조
  
  
  • yarn add node-sass : sass 다운 받는 법
    • npm list : list로 확인한다.
• Box.module.css : css module 컴포넌트 단위별 스타일링 중첩 방지
  • 사용하는 이점
    • 레거시 프로젝트(구형, 이전)에 리액트를 도입할 때 (기존 프로젝트에 있던 css 클래스와 이름이 중복되어도 스타일이 꼬이지 않게 해준다)
    • css 클래스를 중복되지 않게 작성하기 위해 css 클래스 네이밍 규칙을 만들기 귀찮을 때(즉, 아래와 같은 규칙을 사용하고 싶지 않은 경우)
  • css 클래스 네이밍 규칙
    1. 컴포넌트의 이름은 다른 컴포넌트랑 중복되지 않게 한다
    2. 컴포넌트의 최상단 css 클래스는 컴포넌트의 이름과 일치시킨다.
    3. 컴포넌트 내부에서 보여지는 css 클래스는 css selector를 잘 활용한다.
       • .MyFrom .my-input 으로 지정가능
  • yarn add react-icons
    • 아이콘 yarn으로 다운 받기
• 참고사항
  • css Module 은 Sass에서도 사용이 가능하다. 확장자를 컴포넌트.module.scss 로 바꾸면 된다.
  • :global ⇒ 전역의 의미 → 클래스의 이름을 고유화하지 않고 그대로 사용하는 경우
  • sass를 사용하는 경우
  • :global{ .선택자{ } }
• styled-components
  • css in js 기술, js안에 css를 작성하는 기술
  • 라이브러리 중에 인기 있는 라이브러리로 styled-components를 본디
  • emotion와 styled-jsx가 있다.
  • styled-components : https://styled-components.com/ emotion : https://github.com/emotion-js/emotion styled-jsx : https://github.com/vercel/styled-jsx
  • Tagged Template Literal
    • styled-component가 내부적으로 어떻게 동작하는 이해할 수 있는데 도움 됨.

    const name = 'react';
    const message = `hello ${name}`;
    
    console.log(message);
    출력 : "hello react"
    

  • Template literals - JavaScript | MDN
• [styled-components 사용] yarn add styled-components
• const StyledDiv = styled `background: ${props => props.color};`;