가치투자자

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를 사용할..

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 데이터가 ..