react

What is React? 웹 사이트의 사용자 인터페이스, 즉 UI를 만들기 위한 Facebook이 만든 JavaScript 라이브러리 React를 지탱하는 3가지 중요한 특징 Component Component는 UI를 구성하는 개별적인 뷰 단위

CRA(create-react-app)는 쉽고 빠르게 React 개발 환경을 설정해주는 React 초기세팅 Tool 그래서 애플리케이션 구현에만 신경을 쓰면 된다. npx create-react-app my-react-app my-react-app은 프로젝트 폴더 이

이번 프로젝트에서 카카오 소셜 로그인을 맡게 되었다. 소셜 로그인 중 카카오가 가장 쉽다고 한다. 그 이유는 카카오 개발자 사이트에서 사용 가이드를 친절하게 작성해놓았기 때문이라고 한다. 하지만 나는 어려움을 겪었고, 그 내용을 다시 복습하고 다른 사람에게 도움을 주고

리액트에서 기본적인 Modal 을 구현해봤다. 전체적인 코드는 아래와 같다. 함수형 컴포넌트와 스타일드 컴포넌트를 사용해서 구현했다.SignatureHeadCover 라는 부모 컴포넌트에 Modal 컴포넌트를 사용해주었다. 모달 기능 로직 \- modalState 초

❤️ 찜하기 기능 구현을 함께 해볼까요? 리액트 함수형 컴포넌트로 코드를 작성해 보겠습니다:) 함수형 컴포넌트이기 때문에 useState 를 사용하여 state 의 초기값을 설정해준다. wishAddHandler 함수를 wishCountHandler 함수 안에 넣어줄

근데 Hook이 뭔가요? Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않고, 대신 class 없이 React를

리액트가 제공하는 훅을 이용해서 커스텀(custom) 훅을 만들 수 있다. 훅을 직접 만들어서 사용하면 쉽게 로직을 재사용할 수 있다.뿐만 아니라 컴포넌트의 복잡도가 낮아져 유지보수에 좋고 단순하고 명시적인 방법으로 리액트스럽게 훅을 사용한다는 장점이 있다. 리액트의

콘텍스트 API를 사용하면 부모 컴포넌트에서 상당히 멀리 떨어져있는 자식 컴포넌트에게 바로, 직접 데이터를 전달할 수 있다.콘텍스트 API를 사용하지 않으면 부모에서 수많은 하위 컴포넌트들을 거쳐 자식 컴포넌트까지 속성값을 내려줘야할 것이다. \>사용법 상위 컴포넌트

리액트로 작업하다 보면 돔 요소에 직접 접근해야 할 때가 있다. 예를 들어, 돔 요소에 포커스를 주거나 돔 요소의 크기나 스크롤 위치를 알고 싶은 경우다. 이 때 ref 속성값을 이용하면 자식 요소에 직접 접근할 수 있다. \>사용법다음은 ref 속성값을 이용해서 in

useCallback은 리액트의 렌더링 성능을 위해 제공되는 훅이다. 컴포넌트가 렌더링될 때마다 새로운 함수를 생성해서 자식 컴포넌트의 속성값으로 입력하는 경우가 많다. 이것은 부모 컴포넌트가 렌더링될 때마다 자식 컴포넌트의 속성값으로 새로운 함수가 입력되기 때문에 불

useReducer 훅을 사용하면 컴포넌트의 상태값을 리덕스의 리듀서처럼 관리할 수 있다. 그리고 여러 상태값을 관리할 때 좋고, useReducer와 콘텍스트 API를 이용하면 상위 컴포넌트에서 트리의 깊은 곳으로 이벤트 처리 함수를 쉽게 전달할 수 있다. \>사용법

prop-types는 속성값의 타입 정보를 정의할 때 사용하는 리액트 공식 패키지다. 속성값의 타입 정보는 컴포넌트 코드의 가독성을 위해서 필수로 작성하는 게 좋다.자바스크립트는 동적 타입언어로 타입이 없기 때문에 배우기 쉽고 간단한 프로그램을 작성할 때는 생산성이 좋