React

javascript를 확장한 문법이다.리액트의 엘리먼트를 생성하기 위해 사용된다.html에서 사용되는 태그를 그대로 사용할 수 있으며 자바스크립트의 모든 기능이 포함되어 있다.브라우저에서 실행하기 전에 바벨을 사용해 일반 자바스크립트 코드로 변환된다.JSX 기본 사용법

화면에서 UI요소를 구분할 때 컴포넌트라는 용어를 사용한다.컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.javascript 함수와 유사하며 HTML의 비효율적인 중복되는 코드를 줄일 수 있다.컴포넌트에는 함

Properties 속성을 의미하는 용어의 약자이다.상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 사용하며 단방향 데이터 흐름을 갖늗다.하위 컴포넌트는 전달받은 데이터를 수정할 수 없다.프로퍼티로 문자열을 전달할 때는 따옴표를 사용하며, 문자열 이외의 값은 중괄호로

리액트 16.8 버전에서 새로 추가된 기능함수형 컴포넌트에서 react state와 생명주기 기능을 연동할 수 있게 해주는 함수이다.클래스의 생명주기 메서드를 함수형 컴포넌트에서 사용할 수 있는 것이다.컴포넌트의 상태를 의미한다.리액트 훅의 한 종류로 컴포넌트의 상태를

컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 HookuseEffect를 사용해 컴포넌트가 마운트, 언마운트 될 때 혹은 업데이트될 때 특정 작업을 처리할 수 있는 것이다.기본 구조는 아래와 같다.function()은 수행하고자 하는 작업이며, deps는

컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 의미한다.css파일을 별도로 두지 않고 컴포넌트 내부에 넣기 때문에 css가 중첩되는 경우를 방지할 수 있다.node package manager를 통해 관리되는 패키지이므로 npm 명령어를 통해 설치할 수 있다.성공적으로

theme는 모든 색상을 가지고 있는 object를 말한다.보통 다크모드를 구현하기 위해 사용된다.색상을 바꿀때는 object만 바꿔주면 되는 것이다.theme를 사용하기 위한 작업은 보통 index.js 파일에서 이루어진다.styled-components로부터 The

리액트와 타입스크립트를 함께 사용하는 환경에서 props를 스타일 컴포넌트에 넘겨줄 떄 타입을 지정하지 않으면 오류가 발생하는 것을 알게 되었다.타입스크립트 환경에선 props의 타입 지정이 필요하다는 것을 알게 되었고 이 내용을 정리해보고자 한다.하고자 하는 내용은

useState 사용법은 리액트와 동일하다.타입스크립트에만 존재하는 특징을 살펴보자.useState의 초기값을 지정해주면 타입스크립트는 state의 타입을 자동으로 추론해준다.초기값이 문자열일 경우 string, 숫자일 경우 number로 추론된다는 것이다.그렇기에 초

📋 타입스크립트에서 이벤트 객체 타입 지정하기 타입스크립트에서 이벤트 객체에 접근할 때는 타입을 명시해주어야 한다. 타입을 명시하지 않을 경우 any 타입이 암시적으로 포함된다고 하지만 any를 쓰는 순간 타입스크립트를 사용하는 의미가 사라진다. 이벤트 객체의

useParams를 사용하기 전 라우팅에 대해 간단히 알아보자라우팅이란 사용자가 요청한 URL에 알맞은 페이지를 보여주는 것을 의미힌다.react-router-dom에서 제공하는 기능 중 하나로 파라미터 값을 URL을 가져와 넘겨받을 페이지에서 사용할 수 있도록 해주는

css 초기 값은 브라우저별로 약간의 차이가 있기 때문에 초기화 해주는 과정이 필요하다.전역 스타일링을 통해 기본적으로 부여된 스타일을 제거하거나 공통으로 부여할 스타일을 정의하는 것을 의미한다.\-globalStyle.tsx위 파일은 전역 스타일링을 정의한 것이다.스

타입스크립트 환경에서 useState를 사용할 때 state의 타입을 지정해주어야 할 경우가 있다.일반 리액트 환경에서 사용하는 것과 동일한데 제네릭을 사용하지 않아도 자동으로 state의 타입을 유추하기 때문에 제네릭 생략이 가능하다.그렇다면 제네릭을 써야하는 경우는

진행하고 있는 프로젝트의 상세 페이지를 구현하기 위해 사용하는 useLocation에 대해 알게 되어 정리하고자 한다.Link를 사용할 때 state를 통해 props를 전달해 줄 수 있다.기본 형식은 아래와 같다.state로 전달한 데이터는 useLocation읕 통

스타일 컴포넌트의 테마에 사용될 변수 타입을 선언하기 위한 파일이다.보통 자주 사용하는 css를 변수로 등록한다.styled-components 모듈에 defaultTheme라는 인터페이스 내부에 타입을 선언한다.styled.d.tsdefaultTheme 인터페이스를

📋 Nested Routes 중첩 라우팅을 작성하는 방법에 대해 알아보고자 한다. 중첩 라우팅은 특정 페이지의 서브 페이지를 만드는 개념이라고 생각할 수 있다. 특정 페이지에서 구분값을 주어 화면을 교체해야할 때 사용한다. 현재 진행중인 프로젝트로 예시를 들어

useMatch > 사용자가 특정 url 경로에 있는지에 대한 여부를 알려주는 훅 특정 경로에 있다면 매치된 정보를 객체 형태로 반환 매치되지 않은 경로라면 null 반환

스타일 컴포넌트에 props를 전달해 조건부 스타일링을 하던 중 아래와 같은 오류가 발생했다.

📋 react-query react-query는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리 react-query는 데이터를 캐시에 저장 QueryClient QueryClent를 사용

중첩 라우팅 구현시 사용하는 Outlet에서 렌더링될 하위 컴포넌트에 props를 전달할 수 있다.아래의 라우터 구조를 갖고 설명해보자.Router.tsxCoin.tsx위 코드를 보면 Price, Chart 컴포넌트는 중첩 라우터임을 알 수 있다.부모 컴포넌트 내부에

인자 전달하는 법 [queryKey, 인자] queryKey : 카테고리 역할 인자 : url에 있는 파라미터 값 구분에 사용될 수 있도록 하는 고유값 하나의 컴포넌트에서 여러개의 쿼리를 갖고 있을 때 isLoading, data등 동일한 이름의 키값을 사용하는

useNavigate는 특정 행동을 했을 때 지정한 주소로 이동할 수 있는 기능을 제공한다.위 코드 처럼 useNaviagte를 사용하기 위한 변수를 선언해주고 해당 변수를 사용해 이동할 경로를 지정해주면 된다.첫 번째 인자로는 사용자가 이동할 주소, 두 번째 인자로는

📋 recoil state management library props drilling 같이 정리

📋 react hook form > React 기반의 폼 관리 라이브러리로, 폼 상태와 유효성 검사를 처리하기 위한 간편한 방법을 제공 폼 컴포넌트의 상태 및 유효성 검사를 관리하는 데 필요한 코드 양을 대폭 줄일 수 있다. 폼 요소의 값이나 상태 변경에 대한 이벤

폼의 유효성 검사를 하기 위해선 react-hook-form의 기본이 되는 register 내부에 등록하여 사용한다.위의 예시 코드는 아이디, 비밀번호 모두 필수값으로 입력하도록 작성된 코드이다.유효하지 않은 항목이 있다면 해당 항목이 포커스되는 것을 확인할 수 있다.

제목의 오류는 변경할 수 없는 배열 수정을 시도할 경우 발생하는 에러이다.버튼 클릭 시 기존의 카테고리를 useSetRecoilValue()를 통해 변경하고자 했다.위 코드의 반환값을 확인해보니 제목의 오류가 발생하였다.원인은 오류 문구 read only에 있었다.읽기

📋 findIndex > 배열의 특정 조건을 만족하는 요소를 찾아 첫 번쨰 요소의 인덱스를 반환하는 함수 만족하는 요소가 없으면 -1을 반환한다. 매개변수로 콜백함수를 사용하며, boolean값을 반환할 수 있도록 해야 한다. 프로젝트 예시 현재 진행중인 투두리

📋 Selector > 기존에 선언한 atom을 전/후 처리하여 새로운 값을 리턴하거나 기존 atom의 값을 수정하는 역할을 수행한다. 참조한 atom의 값이 최신화되면 자동으로 selector의 값도 최신화하므로, 관리하기에도 간편하다. selector 작성 방

📋 Recoil-persist recoil을 사용중이라면 recoil-persist 패키지지를 통해 로컬스토리지를 구현할 수 있다. 사용법 첫 번째로 recoil-persist 패키지를 설치해주어야 한다. 패키지를 설치했다면 저장할 값이 있는 곳에서 아래와 같