React

컴포넌트는 재사용이 가능한 UI 구성 요소를 의미한다.웹에서는 HTML을 통해 다음과 같은 태그를 사용하여 문서 구조를 만들 수 있다.위와 같은 마크업과 CSS, JS를 결합하여 웹에서 볼 수 있는 UI를 만들 수 있다.하지만 이러한 HTML마크업과 CSS, JS만을

props는 jsx태그에 전달하는 정보이다.기본적으로 존재하는 html태그에 전달할 수 있는 props는 미리 정의되어있지만, 커스텀 컴포넌트에 대해서는 어떤 props를 전달받을지 설정할 수 있다.위의 코드를 보면 컴포넌트를 선언할 때 매개변수로 어떠한 props들을

useState는 리액트에서 사용되는 특별한 함수인 hook의 일종으로 함수형 컴포넌트 내부에서 상태를 정의하고, 그 상태를 관리할 수 있게 해주는 훅이다.useState의 반환값은 배열이며, js의 구조분해할당을 통해 다음과 같이 사용한다.첫 번째 원소로 넘어오는 값

useState를 통한 input관리 이전에 알아본 useState를 통해 사용자에게 입력을 받는 코드는 다음과 같이 나타낼 수 있다. 위의 코드는 state를 통해 input의 value를 onChange이벤트가 발생할때마다 업데이트해주고, Set Name버튼을 클

ref는 useRef를 통해 반환받은 객체로, 리액트 컴포넌트의 특수한 props인 ref에 넣어 HTMLElement에 접근하는 용도로 자주 사용된다.이러한 ref를 상위 컴포넌트에서 하위 컴포넌트로 전달하기 위해서는 어떻게 해야할까?React 18이하의 버전들은 r

createPortal을 사용하면 컴포넌트의 일부를 다른 DOM에서 렌더링할 수 있다.예를들어 Modal과 같은 컴포넌트는 body의 최상단에 오는것이 가독성 면에서 좋다.하지만 만든 Modal을 매번 최상위 컴포넌트에서 호출하는것은 어렵다.따라서 이러한 경우 port

연습 프로젝트를 진행하면서 다음과 같은 구조로 이루어져 있는 사용자 입력 태그를 구현해야 했다.p태그 안에 label태그와 입력태그가 존재하는 구조이고, input인지 textarea인지의 차이만 존재하며 스타일은 모두 같은 상황이였다.그렇다면 이것을 하나의 컴포넌트로

리액트 애플리케이션은 기본적으로 부모 컴포넌트와 자식 컴포넌트로 이루어진 트리 구조를 갖고있다.따라서 부모 컴포넌트에 있는 데이터를 자식 컴포넌트에서 사용하기 위해서는 props를 통해 데이터를 전달해 주어야 한다.하지만 데이터를 전달하는 컴포넌트와 전달받아 사용하는

side effect는 앱이 제대로 동작하기 위해 실행되어야 하지만 현재의 컴포넌트 렌더링 과정에 직접적인 영향을 미치지 않는 작업을 의미한다.side effect를 다루는 과정에서 흔하게 발생할 수 있는 문제는 무한루프 문제가 있다.예를들어 위와 같은 코드는 side

Hook은 자바스크립트 함수로 정의되지만 호출 위치에 제약이 있는 특별한 유형의 재사용 가능한 UI로직으로, React에서 use로 시작하는 함수를 의미한다.지금까지 사용해왔던 useState, useRef, useEffect등이 모두 React의 hook이다.Reac

form을 제출하는 방법에는 다음과 같이 여러 방법이 존재한다.button의 type은 기본적으로 submit이기 때문에 form요소 안에 있는 button을 클릭할 경우 form이 자동으로 제출된다.따라서 onClick을 통해 form요소를 사용하는 함수를 연결한 뒤

기본적으로 HTML태그중 하나인 form에는 action이라는 속성이 존재한다.원래 form의 action은 form data를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시하는 용도로 사용되지만, 리액트 19버전부터는 함수를 사용하여 폼 제출을 처리하는 것이 가

라우팅이란 사용자가 특정 URL을 방문했을 때 그 URL에 맞는 페이지나 컴포넌트를 사용자에게 보여주는 기능을 의미한다.React는 기본적으로 싱글 페이지 어플리케이션(SPA)이기 때문에 서버는 하나의 html파일만을 갖고있다.따라서 리액트에서 라우팅은 URL이 변경될

React Router를 사용할때는 이전에 알아보았던 useEffect를 사용하여 데이터를 fetch해오는 작업을 하는것이 아니라 React Router에서 지원하는 여러가지 방법으로 데이터를 fetch해오는것이 가능하다.기본적으로 다음과 같은 구조의 loader함수를

먼저 리액트 프로젝트를 빌드를 하면 하나의 커다란 파일에 모든 코드가 병합이 된다.따라서 사용자는 해당 페이지에 방문했을 때 모든 코드를 불러와야 첫 화면을 볼 수 있고, 이는 커다란 프로젝트에서 첫 페이지 로딩이 느려지게 된다.이럴때 사용하는 최적화 기법이 지연 로딩

합성 컴포넌트는 독립적으로 동작하지 않고 다른 컴포넌트와 같이 동작하도록 만들어진 컴포넌트이다.예를들어 HTML 요소중 <select>와<option>은 개별적으로는 사용하지 않으며, 다음과 같이 사용된다.이와 같이 항상 함께 작동해야 하는 컴포넌트를 합성

이벤트 버블링은 어떤 HTML 요소에서 이벤트가 발생했을 때, 그 요소에서 시작해서 부모, 조부모, 최상위까지 차례대로 이벤트가 전파되는 것을 의미한다.예를들어 위와 같은 <TagButton> 컴포넌트를 사용하여 여러 태그들이 존재하는 <TagList>컴포넌