일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 | 30 |
- hatso
- ES6+
- CSS
- This
- hooks
- next.js
- git
- github
- Python
- DOM
- 우아한테코톡
- gitCLI
- developerlife
- JS
- 최적화
- learn next.js
- ES5+
- object
- API
- react
- 햇소
- AI
- array
- es6
- dev
- 함수
- 변수
- 선택자
- html5
- JavaScript
- Today
- Total
목록WEB/React (12)
codinghatso
useEffect의 두 가지 형태 첫 번째 컴포넌트가 렌더링 될 때마다 실행 useEffect(() => { //작업... }); 두 번째 화면에 첫 렌더링 될 때 실행 배열 인자의 값(value)이 변화할 때마다 실행 useEffect(() => { //작업... },[value]); // [] 두번째 인자가 빈 배열일 때에는 화면에 첫 렌더링 될때 만 실행한다. useEffect의 Clean Up useEffect(() => { const timer = setInterval(() => { console.log('타이머 돌아가는 중...'); }, 1000); return () => { clearInterval(timer); console.log('타이머가 종료되었습니다.'); }; }, []); 한번..
Hook이란? React 16.8에 새로 추가된 기능. Hook은 class를 작성하지 않고도 state와 다른 react의 기능들을 사용할 수 있도록 해준다. Hook은 특별한 함수이다. 예를 들어 "useState"(Hook함수)는 state를 함수 컴포넌트 안에서 사용할 수 있게 해 줍니다. 기존 에는 state를 추가하고 싶을 때 클래스 컴포넌트로 바꾸곤 했습니다. 하지만 이제 함수 컴포넌트 안에서 Hook을 이용하여 state를 사용할 수 있습니다. Hook의 규칙 최상위(at the Top Level)에서만 Hook을 호출해야 합니다. 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 마세요. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이..
useState는 state와 setState를 배열 형태로 return 해 줍니다. const [state, setState] = useState(초기값); state에는 현재 상태 값이 들어있습니다. setState로 상태 값을 업데이트시켜줄 수 있습니다. setState값이 변경 될 때마다 업데이트(렌더링) 됩니다. State값을 변경할 때 변경할 값이 이전 State값과 연관되어 있다면 콜백함수를 사용하는 게 좋습니다. setState((prevState) => { return newState; }) //배열 형태는 [input, ...prevState] 스프레드 문법으로 새로운 배열을 return 하면 된다. State의 초기값이 어떤 무거운 함수의 결괏값으로 전달될 때 콜백함수로 전달하면 초기..