useEffect

[React] useEffect와 sideEffect

useEffect란? React에서 제공하는 useEffect()는 sideEffect를 처리하기 위해 사용한다고 한다. 리액트의 순수한 함수적인 세계에서 명령적인 세계로의 탈출구라고 생각하면 된다. 즉, 렌더링 이외에 일으켜야하는 sideEffect를 일으킬 탈출구라고 보면 된다. sideEffect를 렌더링 이후에 발생하며 업데이트 된 정보가 있어 새롭게 화면에 그려야할 경우 새롭게 렌더링을 일으킨다. SideEffect란? sideEffect란 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 sideEffect라 한다. 즉, 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다. 예를들어 함수에서 전역변수의 값을 변경하거나 혹은 함수 외부에..

[React] useEffect와 Side Effect

Rendering in React React에서 함수 컴포넌트의 rendering이란 state, props를 기반으로 UI 요소를 그려내는 행위 렌더링의 결과물은 UI 요소, 즉, 화면에 JSX 문법으로 무엇이 나타날지를 적어둔 컴포넌트들 그러한 렌더링 결과물에 영향을 주는 요소가 state와 props Side Effect Side Effect는 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다. 즉, React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들이라고 볼 수 있다 코드 예시 let count = 0 function greetWithSideEffect(name) { // Input count = count + 1 // Side ..

[React] Hooks

Hooks Hooks은 리액트 v16.8에 새로 도입된 기능으로 함수 형태의 컴포넌트에서 사용되는 몇 가지 기술을 Hook이라 부른다 Hooks은 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState & 렌더링 직후 작업을 설정하는 useEffect등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 만일 앱을 react hook을 사용하여 만든다면 class component. render 등을 안 해도 된다는 뜻이다 즉, 모든 것은 하나의 function 함수형 프로그래밍이 가능해진다는 것이다 Why?? 왜 굳이?? 굳이 잘 쓰고 있던 클래스형 컴포넌트를 함수형 컴포넌트로 바꾸는 이유는 클래스는 react를 배우는 데에 있어서 큰 진입장벽이었다..