React

자바스크립트 오픈소스 라이브러리이다. 리액트는 선언형이고, 컴포넌트 기반이고, 다양한 곳에 활용할 수 있다는 3가지 특징이 있다.선언형컴포넌트 기반범용성JSX는 JavaScript XML의 줄임말로 리액트에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확

SPA 방식으로 만들어진 대표적인 서비스로는 Youtube, facebook, Netflix 등이 있다.SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는

둘 다 다시 리턴을 해서 UI를 바꿈 Props 리액트에서 props는 속성(property)를 의미한다. 변하지 않는 값에 사용하고 그렇기 때문에 변경할 수 없으므로읽기 전용 객체이다. 콘솔에 props를 찍어보면 정의한 속성을 키와값으로 갖는 객체가 출력된다. 클

종종 하위 컴포넌트에서 상위컴포넌트의 State를 변경해야 하는 경우가 생긴다. 이런 경우 상태 끌어올리기를 하는데, 리액트는 하향식 데이터 흐름을 따르는데 어떻게 이런 일을 할 수 있는 것일까?

useRef는 변수 관리와 DOM 요소에 접근할 때 유용한 React Hook이다.useRef()는 {current: 초기값} 형태의 객체를 리턴한다.useRef()가 리턴하는 객체는 수정이 가능하기 때문에 언제든지 값을 변경할 수 있다.ref의 값이 변경되어도 렌더링

React는 변화된 부분을 실제 DOM에 바로 적용하는 것이 아닌, Virtual DOM이라고 하는 가상의 DOM에 적용 후 실제 DOM과 비교하여 바뀐 부분을 적용하는 방식으로 작동한다.React는 기존의 가상 DOM 트리와 새롭게 변경된 가상 DOM 트리를 비교할

Memoization(메모이제이션)동일한 값을 리턴하는 함수를 반복적으로 호출해야하는 경우, 맨 처음 값, 혹은 함수를 메모리에 저장해두고 다음에 필요할 때는 메모리에서 꺼내 재사용하는 기법렌더링 → 컴포넌트(함수형) 호출 → 컴포넌트 내부 모든 변수 초기화위와 같은

fetch로 데이터를 받아오거나, input에 의한 상태 변경과 같은 로직은 자주 사용되고 여러 컴포넌트에서 사용된다. 이럴 때 Custom Hooks를 사용하면 매번 같은 코드를 반복해서 작성할 필요 없이 만들어둔 Custom Hook을 불러와 편리하게 사용할 수 있

React는 SPA(Single-Page-Application)이므로 사용하지 않는 컴포넌트까지 한번에 불러오는 단점이 있다. React.lazy()를 사용하면 컴포넌트를 동적으로 import할 수 있기 때문에 초기 렌더링 시간을 줄 일 수 있다.단, React.laz