[TIL] 23.07.13 Today I Learned

요약: 리액트 일정관리 앱 실습, 패스트컴퍼스 강의

일시: 23.07.13 09:30 ~ 18:20

장소: 더휴먼컴퓨터아트아카데미

배운 점:

HTML

데이터 속성 사용하기

- 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성

- "data-"로 시작하여 사용자가 직접 작명 가능

- 특정한 데이터를 DOM 요소에 저장해두기 위한 목적.

- getAttribute로 속성값을 불러올 수 있음

- 하나의 HTML 요소에 여러 데이터 속성을 동시에 사용할 수 있다.

 

CSS

backdrop-filter

- 요소 뒤에 흐릿하게 흐림 효과 주거나, 다양한 색상 필터링 효과 줄 때 사용.

 

mask

// mask클래스가 추가로 붙었을 때 모션 처리
        &:nth-of-type(1).mask{
            -webkit-mask: url(../src/mask1.png);
            // 23장 나열, 가로 -> 100% * 23 = 2300%, 세로 100%
            -webkit-mask-size: 2300% 100%;
            animation: mask-play 1.4s steps(22) forwards;
        }

        &:nth-of-type(2).mask{
            -webkit-mask: url(../src/mask2.png);
            -webkit-mask-size: 3000% 100%;
            animation: mask-play 1.4s steps(29) forwards;
        }

        &:nth-of-type(3).mask{
            -webkit-mask: url(../src/mask3.png);
            -webkit-mask-size: 7100% 100%;
            animation: mask-play 1.4s steps(70) forwards;
        }

        &:nth-of-type(4).mask{
            -webkit-mask: url(../src/mask4.png);
            -webkit-mask-size: 7400% 100%;
            animation: mask-play 1.4s steps(73) forwards;
        }


@keyframes mask-play {
    0%{-webkit-mask-position: 0% 0%;}
    100%{-webkit-mask-position: 100% 0%;}
}

 

 

REACT

react-scss

scss 다운로드

npm install node-sass

CSS의 확장자를 scss(sass) 로 변경

적용할 컴포넌트의 Import를 scss(sass) 로 변경

*scss watch할 필요 없음.

 

props.children

태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 props

const App = () => (
  <Category>
    <li>First item.</li>
    <li>Second item.</li>
    <li>Another item.</li>
  </Category>
);

const Category = (props) => {
  return <ul>{props.children}</ul>;
};

 

react-icon

https://react-icons.github.io/react-icons/

React Icons

React Icons 다운로드

// 맥: 터미널, 윈도우: CMD
npm install react-icons --save

 

React Icons 사용방법

import { IconName } from "react-icons/{Icon 경로}";

<AiFillAccountBook />

 

classnames 모듈

classnames 다운로드

// 맥: 터미널, 윈도우: CMD
npm install classnames

 

classnames 사용방법

import React from 'react';
import './styles';
import classnames from 'classnames';

const TestComponent = (props) => {

  const {data, description} = props;
  const valid = data.find(item => item.text === 'abc');

  return (
    <div className={classnames('box-info', {mg-10: valid})}>
      {description}
    </div>
  );
}
export default TestComponent;

 

useRef

useRef 사용하는 경우

- focus

- text selection

- media playback

- 애니메이션 적용

- DOM 기반 라이브러리 활용

 

useRef 사용방법

/* 1. 훅 임포트 */
import { useRef } from 'react';

function app() {
  const input = useRef(null);
  /* 2. input은 특정 엘리먼트의 주소값을 담는 변수가 된다. */
  
  const onButtonClick = () => {
    input.current.focus();
    /* 4. 해당 함수가 실행되면, input이 가지고 있는 주소값(input)이 focus된다. */
  };
  
  return (
    <>
      <input ref={input} type="text" />
    /* 3. 특정 태그에 ref 속성을 붙이고 미리 할당했던 useRef 객체를 넣으면, 
    해당 태그의 주소값을 input이라는 변수가 가지고 있게 된다. */
      <button onClick={onButtonClick}>Focus</button>
    </>);
}

 

 

부족한 점:

 

 

출처

https://riviere.tistory.com/108

https://developer-talk.tistory.com/226

https://chanhuiseok.github.io/posts/react-14/

https://velog.io/@tai/React-useRef