Multi Developer SuHo

안녕하세요~ 이번에는 리액트 훅 종류중 useEffect에 대해 알아보겠습니다. 📑목차1. useEffect1-1. useEffect란?1-2. useEffect 사용 방식1-3. useEffect 의존성 배열1-4. useEffect 사용 코드 서론먼저 useEffect 훅을 사용하기전 생명주기에 대한 이해가 있으셔야 합니다. 왜냐하면 useEffect는 생명주기를 대체하기 때문입니다. 이전에 클래스형 컴포넌트에서 생명주기 함수를 보시면 componentDidMount( ), componentDidUpdate( ), componentWillUnmount( ) 이 함수들을 사용하셨을 겁니다. 생성, 업데이트, 소멸 이런 순서로 말이죠, 함수형에서 생명주기는 useEffect로 처리할 수 있기 ..

안녕하세요~ 이번에는 리액트에서 State와 props에 대해 알아보고 각각 무엇을 뜻하고, 어떻게 사용되는지 한번 이번 내용을 통해 알아보도록 하겠습니다.📑목차1. state1-1. state란?1-2. state 특징1-3. 클래스형 컴포넌트 state1-4. 함수형 컴포넌트 state 2. props2-1. props란?2-2. props 특징2-3. 클래스형 컴포넌트 props2-4. 함수형 컴포넌트 props서론리액트에서 state와 props를 학습하기전, node에서 혹시 res.json({state: 200, message : "응답 성공!"}) 이런 형식에 대한 응답 요청을 보신적이 있으신가요? node 에서 "state" 는 상태 코드를 나타냈습니다. 리액트에서도 state는 "상태"..

안녕하세요~ state, props 다음 이제 훅의 탄생으로 컴포넌트의 개발 생산성이 높아지게 되면서 useState등 훅의 필요도가 높아졌습니다. 이번에 알아볼 내용도 훅의 종류중 하나인 useState로 상태관리하는데 사용되는 훅입니다. useState를 어떻게 사용하고 상태를 관리하는지 한번 보시죠~📑목차1. useState1-1. useState란?1-2. useState 사용법1-3. useState 예제 코드서론React를 사용해보신 분이라면, 본문으로 들어가기 전에 이런 경험이 있을 겁니다. Hook이 등장하기 전에는 컴포넌트에서 상태 관리를 할 때 this.state를 사용해야 했습니다. 또한 상태를 변경하려면 항상 this.setState를 사용해야 했고, this를 제대로 바인딩하지 ..

안녕하세요~ 이번에는 리액트 함수형 컴포넌트와 훅에 대해 알아보도록 하겠습니다.📑목차1. 함수형 컴포넌트1-1. 함수형 컴포넌트의 등장 배경1-2. 함수형 컴포넌트 문법2. Hook(훅)2-1. Hook(훅)이란?2-2. Hook(훅)의 등장 배경2-3. Hook(훅)의 종류서론먼저 함수형 컴포넌트를 배우기 전에 클래스형 컴포넌트 구조를 한번 보셨을까요? 클래스형 컴포넌트에는 생성자 함수를 호출하고, this 키워드를 사용하여 컴포넌트 구조를 구현했어야 했습니다. 클래스 문법에 대한 개념이 잡혀있지 않으면 개발자로선 구현하기가 어려웠죠, 그래서 이번에 알아볼 내용은 함수형 컴포넌트와 Hook에 대해 알아보도록 하겠습니다. 본론1. 함수형 컴포넌트 1-1. 함수형 컴포넌트의 등장 배경 초기에는 함수형 ..