가치투자자

React Hooks 이제 더 다양한 Hook에 대해 살펴볼 것이다. 아직 Hook에 대해 익숙하지 않다면 아래 글을 먼저 읽고 오길 바란다. https://valueengine.tistory.com/76 [React/기술면접] Hook (1) React Hooks * 기술면접 질문은 맨 아래에 적혀 있습니다 1. Hook의 등장 배경 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 클래스형 컴포넌트에서는 constructor(생성자)에서 state를 정 valueengine.tistory.com 4. useReducer useReducer는 여러 개의 하위 값을 포함하는 복잡한 state를 다뤄야 할 때 useState 대신 사용하는 Hook이다. 여기서 알아둬야 할 개념에는 Reducer, ..

React Hooks * 기술면접 질문은 맨 아래에 적혀 있습니다 1. Hook의 등장 배경 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 클래스형 컴포넌트에서는 constructor(생성자)에서 state를 정의하고 setState() 함수를 통해 state를 업데이트 해줄 수 있다. 거기다가 생명주기 함수들까지 명확하게 정의되어 있기 때문에 편리하게 가져다 쓰면 된다. 반면, 함수형 컴포넌트에서는 별도로 state를 정의하거나 생명주기에 따른 기능 구현이 불가능했다. 함수가 state를 가지지 못하는 이유는 리렌더링될 때 함수 내에 작성된 모든 코드들이 다시 실행되기 때문이다. 이로 인해 기존에 가지고 있던 state를 전혀 관리(기억)할 수 없기에 함수형 컴포넌트에서는 state를 사용할..

생명 주기 (Life Cycle) 혹시 컴포넌트도 수명이 있다는 것을 알고 있나요? 사람이 태어나서 성장하고 생명을 다하는 것처럼 리액트 컴포넌트도 이러한 과정을 겪으며, 이를 생명주기(Life Cycle)라고 한다. 1. 생명 주기 React 컴포넌트에는 생명 주기(라이프사이클)가 존재한다. 생명 주기는 생성(mounting) - 업데이트(updating) - 제거(unmounting) 단계로 구성되어져 있으며, 각 단계마다 특정한 이벤트가 발생하며 그 때마다 사용되는 메서드가 있다. 이러한 생명주기 함수는 클래스형 컴포넌트에서만 사용할 수 있으며, 함수형 컴포넌트에서는 사용할 수 없다. 함수형 컴포넌트에서는 Hooks으로 유사한 기능을 활용할 수 있으므로, 이 부분은 Hooks에서 다뤄볼 것이다. 2..

ref란? * 기술면접 질문은 맨 아래에 적혀 있습니다 일반적으로 DOM 요소에 이름을 달 때 id를 사용한다. 리액트의 public/index.html 파일에서도 div 요소의 id로 root를 설정해 리액트 컴포넌트를 렌더링 시켜준다. // public/index.html // src/index.js const root = ReactDOM.createRoot(document.getElementById('root')); 그러나 리액트 컴포넌트 안에서 특수한 경우가 아니라면 id의 사용을 권하지 않는다. 그 이유는 HTML에서 id는 유일해야 하는데, 컴포넌트를 재사용할 때마다 중복 id를 가진 DOM이 여러 개가 생겨나기 때문이다. 따라서 리액트에서 DOM에 이름을 달기 위해 ref(reference)..

State와 Props * 기술면접 질문은 맨 아래에 적혀 있습니다 웹 브라우저에서 데이터가 변경되었을 때 어떻게 반영될까? 자바스크립트에서는 DOM에 직접 접근하여 데이터 변경사항을 반영한다. 아래의 예시 코드를 보면, 버튼을 클릭해 카운트가 증가할 때마다 아이디가 count-text인 DOM 요소에 접근해 텍스트를 변경해준다. let count = 0; function handleClick() { count = count +1; rerendering(); } function rerendering() { const cntText = document.querySelector('#count-text'); cntText.innerText = `Count : ${count}`; } 그러나 count 데이터가 ..

React란? * 기술면접 질문은 맨 아래에 적혀 있습니다 JavaScript만으로 큰 어플리케이션을 만들 수 있게 되면서 프론트엔드 사이드에서 돌아가는 어플리케이션 구조를 관리하기 위해 다양한 프레임워크들이 등장했다. 이 프레임워크들은 주로 모델(Model)과 뷰(View)로 구성된 아키텍처를 사용한다. 예를 들어, AngularJS의 경우에는 MVW(Model-View-Whatever) 아키텍처로 어플리케이션을 구조화했다. 여기서 모델은 앱에서 사용하는 데이터를 관리하는 영역이고, 뷰는 사용자에게 보여지는 부분이다. 따라서 데이터가 변경되면 데이터가 반영되는 부분을 찾아 수정해야 한다. 그러나 어플리케이션의 규모가 커지고 구조가 복잡해질수록 이 과정이 결코 쉽지 않다. 그래서 페이스북에서는 오직 뷰(..