[TIL] 원티드 프리온보딩_6일차_220508

📌라이브러리 추천

Store.js

• localStorage를 간단하게 구현 및 사용할 수 있게 해주는 라이브러리로 localStorage의 원리를 잘 알고 있다면 라이브러리를 사용하는 것을 추천!

  localStorage.setItem('user', [값]) 을
  store.set('user', 값) 이라고 간결하고 직관적이게 나타낼 수 있다

slick.js

• 캐러셀 라이브러리

day.js

• 날짜 변환에 유용한 라이브러리이다.
• 비슷하게 moment.js도 있지만 이건 용량도 너무 크고 해서 dayjs를 더 추천한다

📌 json to us 추천

• 타입스크립트 사용할 때 필수인 타입을 정의하는 일! vscode 익스텐션이 json to us 꼭 사용할 것! 유용!

📌 alert 사용?!

• alert기능을 사용하는 것을 권장하지 않는다. 그 이유는 웹에서 alert 나타나는 경우 js가 모두 멈추기 때문!

📌 Context API

• context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다는 특징을 가지고 있습니다.
• 하지만! 대규모 데이터를 기반으로 하는 것은 사용하지 않는 것이 좋고 테마나 다크모드와 같은 기능등을 구현할 때 쓰는 것이 적절하다.

📌 이미지 최적화 하는 방법

• FE라면 렌더링 속도를 중요하게 생각해야한다. 렌더링 속도에 영향을 미치는 것 중에 하나가 이미지다.
• 렌더링 속도가 느려지면 사용자가 이용할 때 불편을 느낄 수 있다. 그러므로 렌더링 속도를 꼭 생각하며 개발할 것
• squoosh 웹 사이트를 이용하여 이미지 최적화 하자!
• 색상이 적은 이미지는 png로, 많은 이미지는 jpg로 파일 변환을 하며 팔레트색을 줄이며 이미지파일을 최적화 할 수 있다.

📌 React Hook

useState

• 상태 유지 값과 그값을 갱신하는 함수를 반환하는 특징을 가지고 있다.

  const [state, setState] = useState(initialState);

• 주의해야할 점! state에 객체는 되도록이면 넣지 않는 것을 권장

useEffect

• 컴포넌트가 마운트 됐을 때, 언마운트 됐을 대, 특정 props가 업데이트 될 때 처리한다.

1. 마운트/ 언마운트

import { useEffect } from 'react'

function Test() {
	useEffect(() => {
    	console.log('컴포넌트가 화면에 나타난다')
        return() => {
        	console.log('사라진다')
        }
    })
    
    return(
    	<div>hello~💻</div>
    )
}

2. 특정 props가 업데이트

import { useEffect } from 'react'

function Test() {
	const [count, setCount] = useState(0)
    
    const handleCountClick = () => {
    	setCount((prev) => prev+1)
    }
    
	useEffect(() => {
    	console.log('count~')
    },[count])
    
    return(
    	<button onClick={handleCountClick}>
        	{count}🤩	
        </button>
    )
}