개발 블로그

React 깊이 이해하기(4) - useState

React의 대표 hooks - useState 리액트 함수 컴포넌트에서 가장 중요한 개념은 바로 훅입니다.훅은 클래스 컴포넌트에서만 가능했던 state, ref등의 리액트의 핵심적인 기능을 함수에서도 가능하게 만들었고,무엇보다 클래스 컴포넌트보다 간결하게 작성할 수 있어 훅이 등장한 이후로 대부분의 React 코드는 함수 컴포넌트로 작성되고 있습니다.이러한 hook중 가장 대표적인 useState에 대해서 상세하게 알아보려합니다.      1. useState는 Closure를 통해 상태관리를 한다. React의 가장 기본적인 훅은 당연 useState 일것입니다.useState는 함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅입니다.  만약 useState를 사용하지 않..

리액트 렌더링렌더링이란 단어는 많이 듣고 사용하지만, 명확히 개념을 설명하기는 어려워 정리를 해보려고합니다.브라우저에서의 렌더링은 HTML과 CSS리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정을 말하고,리엑트에서의 렌더링은 브라우저의 렌더링에 필요한 DOM tree를 만드는 과정을 말합니다.좀 더 상세하게 말하자면 React application tree안에있는 모든 컴포넌트들이 자신의 props와 state를 가지고어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 과정을 말합니다.    re-rendering 리엑트에서 렌더링은 유저가 처음 application에 진입하면 최초 렌더링이 발생합니다. (root component 호출)import Imag..

리엑트의 생명주기 / 라이프 사이클생명주기 메서드가 실행되는 시점은 크게 3가지로 나눌 수 있습니다. mount : 컴포넌트가 마운팅(생성)되는 시점update : 이미 생성된 컴포넌트의 내용이 변경(업데이트)되는 시점unmount : 컴포넌트가 더 이상 존재하지 않는 시점    1. class component의 Life cycle  render()render는 React Class Component의 유일한 필수값으로 쓰입니다.이 함수는 컴포넌트가 UI를 렌더링하기 위해서 쓰이고, mount와 update 과정에서 일어납니다. render() 함수는 항상 순수해야하며, 부수 효과가 없어야 한다는 것이 특징입니다. (no side effects)순수해야 한다는 것은 입력값이 있으면 항상 똑같은 결과물을..