05.25.2022 TIL

😸 Vue TIL

😽 Done it

😼 코드리뷰 회고

1 ~ 7: https://gwpaeng.tistory.com/418
Vue: https://gwpaeng.tistory.com/419

😼 React JSX

보통 {}를 이용하여 실행합니다.

😼 값 default

1. 함수.defaultProps

함수.defaultProps = {
  size: 200,
};

2. 인자에 지정

function 함수({ size = 200 }) {}

😼 값 type check

import PropTypes from 'prop-types';

함수.propTypes = {
  size: PropTypes.number,
};

😼 useState

• useState:

1. 지역상태 관리하기 위한 것(Hook)
2. 값이 변경되면 다시 렌더링 한다.

import { useState } from 'react';
// const [상태, 상태를 업데티으 하기 위한 함수] = useState(0);

function C({}) {
  const [count, setCount] = useState(0);
}

😼 useEffect

• useEffect:

1. 무언가 변화가 있을 때 감지하여 반응하는 Hook
2. Component가 처음 로드 될때 사용(init)
3. 전역 이벤트를 사용할 때 사용(Scroll...)
4. return 부분은 Component가 제거될때 실행된다.

import { useState, useEffect } from 'react';

//useEffect(() => {
//   위의 기능(1,2,3번)
//   return 4번
//}, [감지할 것])

const [count, setCount] = useState(0);
useEffect(() => {
  console.log(`hello ${count}`);
}, [count]);

useEffect(() => {
  console.log('Component Load');
  const handleScroll = () => {
    console.log(window.scrollY);
  };

  document.addEventListener('scroll', handleScroll);
  return () => document.removeEventListener('scroll', handleScroll); //컴포넌트 제거될때 실행된다
}, []);

😼 useRef

useRef:

1. DOM에 직접 접근할 때 사용(component에 접근 -> React.forwardRef((_, ref) => {... }))
2. 지역 변수를 사용할 때 사용
3. 값이 변경되더라도 다시 렌더링 되지 않는다.(useState는 값이 변경될때 다시 렌더링 된다.)

1번

import { useRef } from 'react';

function a() {
  const inputRef = useRef();

  //a()에서 Dom 접근
  // return (
  //   <div>
  //     <input ref={inputRef}>
  //     <button onClick={() => inputRef.current.focus()}>Focus</button>
  //   </div>
  // )

  // 밑의 component에 접근
  return (
    <div>
      <Input ref={inputRef}>
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </div>
  )
}

//Input component

import React, { useEffect } from 'react';

const Input = React.forwardRef((_, ref) => {
  useEffect(() => {
    console.log(ref.current);
  }, [ref]);

  return (
    <>
      <input ref={ref}>
    </>
  )
});

export default Input;

2번

import { useRef, useState } from 'react';

const Auto = () => {
  const [count, setCount] = useState(0);
  const intervalId = useRef();

  const handlerStart = () => {
    intervalId.current = setInterval(() => {
      setCount((count) => count + 1);
    }, 1000);
  };

  const handlerStop = () => {
    clearInterval(intervalId.current);
  };

  return (
    <>
      <div>{count}</div>
      <button onClick={handlerStart}>Start</button>
      <button onClick={handlerStop}>Stop</button>
    </>
  );
};

😼 분기 & 반복

if, for -> 삼항연산자, map, filter

return (
  <div>
    <ul>
      {lists.map((list) => (
        <li key={list}>
          {list.id} | {list.title}
        </li>
      ))}
    </ul>
    {check ? <h1>Hello<h1> : null}
    {check && <h1>Hello<h1>}
  </div>
);

😺 Feeling

📖 REF

프로그래머스 데브코스
https://v3.ko.vuejs.org/guide/introduction.html