일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- TypeScript
- grid
- 프로그래머스
- EC2
- hook
- express
- useCallback
- FIGMA
- render
- Taillwind
- webpack
- react
- 자료구조
- github
- Stack
- Javascript
- Babel
- git
- axios
- useMemo
- CSS
- HTML
- Next.js
- 피그마
- docker
- FigJam
- TAILWIND
- 해시
- 코딩테스트
- SSR
- Today
- Total
목록hook (4)
나는 오늘도 멋있다

1. 모든 행동에는 목표를 정하고 근거가 있어야 한다. 2. 문제가 발생하면 해결이 아닌 원인을 찾아야 한다. 3. 다른사람의 관점을 고려해야한다. 학습목적 상태관리와 함께 자주들었던 Context API를 들었을때는 전역상태관리 할때 쓰이는것 아닌가? 라는 생각만을 가지고 있었다. 보통 "가벼운 프로젝트에서 사용하기좋다", "좀더 큰프로젝트에서는 다른 상태관리 라이브러리" 라는 글들을 보았다. 왜그럴까? 사용법을 알아아보고 그에 대한 이유를 알아보자. 모든내용은 내가 추측한 것이아닌 공식문서의 내용을 토대로 하며, 요약 타이틀에만 나의 의견을 반영한다. Context API란? Context API는 React에서 제공하는 기능으로, 컴포넌트 간에 Props를 통해 명시적으로 정보를 전달하지 않고도 하..

1. 모든 행동에는 목표를 정하고 근거가 있어야 한다. 2. 문제가 발생하면 해결이 아닌 원인을 찾아야 한다. 3. 다른사람의 관점을 고려해야한다. 학습목적 React의 hook은 각목적에 맞게 쓰이고 자주 사용되는 hook들이 있다 useState는 상태변경, useEffect는 side Effect 등 말이다. 그중 useReducer은 명칭은 익숙하지만 사용해본적이 없다. Redux에서도 reducer함수에 따라 상태를 업데이트 하는데, Redux와 관계가 있는건가? 하는 궁금증으로 학습을하게 되었다. useReducer란? 여러 상태 업데이트가 많은 구성요소는 상태관리를 하기가 힘들수도 있다. 이런 복잡한 구성 요소의 상태를 하나의 함수로 관리하여, 단일 컴포넌트 내의 복잡한 상태들을 구조화하여 ..
useEffect란? React의 함수형 컴포넌트에서 부수효과(side effects)를 다루기 위한 hook이다 부수효과(side effects): 컴포넌트의 렌더링과는 직접적으로 관련이 없는작업(네트워크 요청,DOM 조작 등) useEffect 왜 사용해야 할까? React의 함수형 컴포넌트에서는 일부 구성요소가 외부 시스템과의 동기화가 필요할 수 있다. 예를들자면 네트워크요청, DOM조작, 구독설정, 타이머 설정들등 컴포넌트의 렌더링과 직접적인 관련이 없는 경우에 사용한다. useEffect 구문 useEffect(callback,[dependencies]) callback: 부수효과를 수행하는 함수로, 컴포넌트 렌더링 후에 비동기적으로 실행된다. 필요에 따라 Clean-up함수를 반환할 수 있다...
useState란? 기존의 클래스 컴포넌트보다 간결하고 명확한 문법을 가지는 함수형 컴포넌트에서 상태변수를 추가할수 있게 해주는 hook이다. 상태변수: 프로그램이나 애플리케이션의 현재 상태를 나타내는 변수다. React에서의 상태변수는 주로 컴포넌트의 상태를 나타낸다. useState 왜 사용해야 할까? React의 함수형 컴포넌트에서 useState는 핵심 hook이라고 볼수 있다. 왜 핵심일까? 상호 작용의 결과로 화면의 내용을 변경해야 하는 경우가 많다. 즉 여러가지 상태변수를 간단하게 정의하고 업데이트하는데 사용된다. useState 구문 const [state, setState] = useState(initValue) initValue: 컴포넌트가 처음 마운트될때 사용되는 초기값 state: ..