🐶🦶 BLOG

side effect ( = effect) 기능 데이터 가져오기 구독 설정하기 수동으로 리액트 컴포넌트의 DOM 수정하기 종류 정리(clean-up)가 필요한 것 그렇지 않은 것 정리(Clean-up)를 이용하지 않는 Effects 리액트가 DOM을 업데이트한 뒤 추가로 코드를 실행해야 하는 경우 네트워크 리퀘스트 DOM 수동 조작 로깅 -> 실행 이후 신경 쓸 것이 없기 때문에! useEffect useEffect가 하는 일? -> useEffect Hook을 이용하여 우리는 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말함 리액트는 우리가 넘긴 함수(effect)를 기억했다가 DOM 업데이트를 수행한 이후에 불러낼 것 문서 타이틀 지정, 데이터 가져오기, 명령형 API 불러내기 등..

Hook과 함수 컴포넌트 함수 컴포넌트 - 둘 다 가능 const Example = (props) => { // 여기서 Hook을 사용할 수 있습니다! return ; } function Example(props) { // 여기서 Hook을 사용할 수 있습니다! return ; } state가 없는 컴포넌트 hook은 state를 함수 안에서 사용가능하게 해줌 hook은 클래스 안에서 동작 X 하지만 클래스를 작성하지 않고 사용 가능 Hook이란? 특별한 함수. 예를 들어 useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줌 언제 Hook 사용? 함수 컴포넌트 안에 state를 추가하고 싶을 때 state 변수 선언 함수 컴포넌트는 this를 가질 수 없기 때문에 this.state를..

📌 State Hook 다음은 버튼을 클릭하면 값이 1씩 증가하는 간단한 카운터 예시 코드이다. import React, {useState} from 'react'; function MyComponent() { // "count"라는 새 상태 변수 선언 const[count, setCount] = useState(0); return ( You click {count} times setCount(count + 1)}> Click me ); } export default MyComponent; 여기서 사용한 useState가 훅(Hook)이다. hook을 호출해 함수 컴포넌트 안에 state 추가 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지 useState 특징 현재의 state값과 이 값을 ..