전체 글

이번 글에서는 리액트에서 말하는 상태의 정의 및 분류와 상태 관리를 잘 하기 위해 알아둬야할 것들을 정리해보았습니다.  1️⃣ 리액트의 상태리액트 어플리케이션에서의 상태는 렌더링에 영향을 줄 수 있는 동적인 데이터 값을 의미합니다.리액트 공식 문서의 정의는 아래와 같습니다." 렌더링 결과에 영향을 주는 정보를 담은 순수 자바스크립트 객체"  2️⃣ 상태의 분류1) 지역 상태 (Local State)컴포넌트 내부에서 사용되는 상태입니다. 체크 박스의 체크 여부, 폼의 입력값 등에 해당되며, 주로 useState 훅을 많이 사용합니다. 경우에 따라서는 useReducer를 사용하기도 합니다.2) 전역 상태 (Global State)앱 전체에서 공유되는 상태를 의미합니다. 여러 개의 컴포넌트가 전역 상태를 사..

React useRef 훅와 필요에 따라 설정해 사용하는 custom Hook에 대해 정리해보았습니다.  1️⃣ useRef리액트 어플리케이션에서 요소에 포커스를 설정하거나 특정 컴포넌트의 위치로 스크롤 하는 등 DOM을 직접 선택해야하는 경우 사용합니다. ● useRef의 타입 정의타입 정의를 보면 useRef는 MutableRefObejct 또는 RefObejct를 반환합니다.// useRef의 타입 정의 3가지function useRef(initialValue: T): MutableRefObject; // 👈 일반적인 값을 저장할 때function useRef(initialValue: T|null): RefObject; // 👈 DOM 요소를 참조할 때function useRef(): ..

TypeScript의 개념과 접목해 React Hook에 대해 정리해보겠습니다. 먼저, React Hook은 왜 생겨나게 된 것일까요? 결론부터 말씀드리면, 리액트 16.8부터는 기존 클래스 컴포넌트의 단점을 해결하기 위해 탄생했습니다. 기존 클래스 컴포넌트는 아래와 같은 단점을 가집니다. 1) 컴포넌트 간 상태 로직 재사용이 어렵다2) 생명주기 메서드에 서로 관련없는 로직들이 얽혀 코드의 복잡성이 증가된다. 아래 예시 코드를 보며 클래스 컴포넌트의 단점을 좀 더 자세히 살펴보겠습니다. // 기존 클래스 컴포넌트의 예시class UserDashboard extends React.Component { constructor(props) { super(props); this.state = { ..

React JSX (JavaScript XML)를 React TSX (TypeScript XML)로 변환해야 할 때, 알아야할 React의 핵심이론들을 정리해보았습니다. 간단한 Button 컴포넌트의 JSX 버전을 TSX로 변환할 때도, 아래와 같이 여러 개념에 의한 변환이 필요합니다. // JSX 버전const Button = (props) => { return 클릭}// TSX 버전// 1. Props 타입 정의 - React.ComponentPropsWithoutRef 활용type ButtonProps = React.ComponentPropsWithoutRef & { customProp?: string;}// 2. FC vs 일반 함수 선언 - 함수형 컴포넌트 타입 활용const Button: ..

타입 스크립트에서 사용되는 데이터 타입들을 원시타입, 객체타입부터 타입스크립트에서만 제공되는 고급 타입까지 총 정리해보았습니다. 전반적인 타입스크립트의 계층 구조는 아래 사진을 참고해보시기 바랍니다.  1. 원시타입number, string, boolean은 가장 대표적인 원시타입으로, 가장 많이 사용되고 사용자에 따라 다르게 사용될 여지가 적지만,null 이나 undefined는 tsconfig 옵션이나 사용자의 취향에 따라서 다르게 사용될 여지가 많습니다. 1) booleantrue와 false 값만 할당할 수 있는 타입. // booleanlet bool1 : boolean = true;let bool2 : boolean = false;2) undefined 정의되지 않았다는 의미의 타입. 초기화되..

기존에 javascript로 작성된 React 코드를 TypeScript로 변환하는 방법을 정리해보았습니다. 마지막에는 처음부터 React Typescript 로 프로젝트를 설정해 시작할 수 있는 Template 설치 방법도 정리해놓았으니 함께 참고해보시기 바랍니다.  📌 변환하는 순서보통 기존의 React javascript 파일을 React tyescript로 변경할 때는 아래와 같은 절차를 따르게 됩니다.  1) 리액트 앱을 위한 타입 정보들을 제공하는 패키지 설치 (4가지) 2) tsconfig.json 파일 root 경로에 추가해 컴파일러 옵션 설정3) 모든 js 파일을 jsx로 변경 4) 개발 파일 확장자를 하나씩 tsx 로 변경 5) tsx로 변경해줌으로써 발생하는 오류 해결  📌 진행해..