React

React Developer Tools는 우리가 React를 사용하여 스크립트로 작성한 컴포넌트 구조를 볼 수 있고 변경하며 테스트를 할 수 있도록 도움을 주는 유용한 디버깅 도구이다.크롬 확장 프로그램에서 추가하면 개발자 모드에서 관련 텝을 사용할 수 있다.Compo

ReactWhat is React?바닐라 자바스크립트를 이용한 사용자 인터페이스 구축 라이브러리다. Why?React를 사용하는 웹사이트를 살펴보자, 예를 들면 넷플릭스.화면의 전환이 매우 부드럽고 반응이 즉각적이며 새 페이지가 로딩되는 듯한 효과가 전혀 없다.Re

React 핵심 - 컴포넌트, JSX, 속성, 상태 등컴포넌트는 잠재적으로 재사용이 가능한 구성 요소로 리액트 개발자가 생성할 수 있고 차후에 혼합하여 전반적인 UI를 구축할 수 있다.결국 리액트 애플리케이션은 컴포넌트를 결합하여 만들어지는 것이다.컴포넌트는 HTML과

이미지 저장소 - public vs assets이미지를 public/폴더 에 저장하면 index.html 혹은 index.css 파일에서 직접 참조할 수 있다. 이러한 이유는 public/ 에 저장된 이미지(파일)이 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개

React - vanilla CSS & styled-componentsVanilla CSS장점 말 그대로 바닐라 CSS이기 때문에 특별한 관례를 따르지 않아도 된다.컴포넌트 파일에서 import해서 사용하니 스타일링을 추가하려는 사람으로 인해 방해를 받거나 간섭을

React - ref & potal Ref >Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. >일반적인 React의 데이터 플로우에서 props는 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단입니다. >

React - useEffect컴포넌트의 Lifecycle을 3가지로 분류해보자.1\. 컴포넌트 마운트2\. 컴포넌트 업데이트(리렌더링)3\. 컴포넌트 언마운트useEffect는 이러한 생명주기 사이사이에 간섭을 줄 수 있는 Hook이다. useEffect는 실행할

useCallback자바스크립트의 함수는 객체의 한 종류이다. 위 코드를 보면 consoleFunction 변수에 함수 객체가 할당되어 있다.이는 리액트에서 컴포넌트가 다시 렌더링된다면 완전히 새로운 함수가 생성됨을 의미한다.말했듯이 자바스크립트에서 함수는 객체 이

React 애플리케이션의 성능을 최적화하기 위해 useMemo와 useCallback 훅을 사용하는 방법에 대해 알아보자.이 두 훅은 컴포넌트가 불필요하게 다시 렌더링되는 것을 방지해 성능을 향상시키는 데 중요한 역할을 한다.useMemo는 메모이제이션된 값을 반환하는

React - redux크로스 컴포넌트 또는 앱 와이드 상태를 위한 생태 관리 시스템이다.먼저, 상태(state)는 세 가지로 구분된다. 로컬 상태데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태예를 들어 특정 UI를 감추거나 보여주는 토글크로