22.06.14_TIL

📌 useEffect를 저번주 페어분이 알려주셨는데 이것을 실제로 활용해보니 상당히 편하게 사용할 수 있어서 좋다.

 

 

📗 오늘 학습한 내용

React

• Side Effect(부수 효과)
  • 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우
    • fetch를 통해 API를 가져올 때
    • 이벤트를 활용해 DOM을 직접 조작할 때
• Pure Function(순수 함수)
  • 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수
• useEffect
  • side effect를 실행할 수 있게 해주는 HOOK
  • 렌더링 조건
    • 컴포넌트 생성후 처음 화면에 렌더링
    • 컴포넌트에 새로운 props가 전달되며 렌더링
    • 컴포넌트의 state가 바뀌며 렌더링
  • 사용방법
    • useEffect만 작성할 경우: 렌더링 마다 실행
    • useEffect 뒤에 빈 배열 작성할 경우: 최초의 한번만 실행
    • useEffect 뒤에 배열 안에 state를 작성할 경우: state가 변화할 때 마다 실행

// 렌더링 마다 실행
useEffect(() => {
	
})

// 최초의 한번만 실행
useEffect(() => {
	
}, [])

// state가 변할 때 마다 실행
useEffect(() => {
	
}, [state])

 

 

 

📘 추가로 공부할 내용

VSCode

• ES7+ React/Redux/React-Native snippets
  • 빈 화면에 컴포넌트의 기본 뼈대를 구성해주는 익스텐션

 

 

📝 오늘 느낀 점 & 마음 가짐

• 익스텐션에는 편리한 것이 많다. 하지만 이것은 양날의 검이 될 수 있다. 익스텐션이 없을 경우 사용할 수 있도록 기본뼈대를 정확히 알아보자!
• 다양한 HOOK에 대해서 공부해보자! 너무 편리하다.