리액트 플러스

useReducer를 사용할 때는 쉽게 생각해서 useState를 사용하면 너무 번거롭거나 너무 많은 일들을 처리해야 하는 경우이다. 관련 state 스냅샷들이 서로 독립적이고 같이 업데이트가 잘 안된다면 useReducer를 사용하고 싶어진다. Tip 언제 사용해야

useEffect()에 객체 속성을 종속성으로 추가하기 위해서 dstructuring을 사용한다.이 방법은 다양한 상황에서 불필요한 Effect 실행을 방지할 수 있다.예를들어 유효성 검사를 수행하는 로그인 시스템에서 사용할 수 있다.시스템에서는 사용자의 입력 데이터를

프로젝트를 진행하면서 첫번째 페이지에서 두번째 페이지로 useState()를 사용해 만든 state 변수를 넘겨줄 일이 생겼다.NavLink, Router등을 이용하여 Type값으로 만들고 이런저런 방법으로 접근했지만 보기좋게 실패했다.계속된 실패를 경험하다가 useL

Start-Up 프로젝트를 진행하면서 컴포넌트 사이의 데이터 전송이 필요했다.사전에 생성했던 FuncList.tsx 컴포넌트의 click state값을 새로 생성한 SubDataList.tsx에 전달해보자.먼저 데이터는 json형식으로 파일에 따로 저장했다.해당 파일은

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하거나 받으면서 항상 props chain을 이용했었다.이때 유쾌하지 못한 부분이 발생하는데 여러 하위 컴포넌트 중 낮은 레벨 수준의 컴포넌트로 데이터를 전달할 때 해당 state를 직접 사용하지 않는 컴포넌트들도 prop

정적 타입컴파일 에러 예방손쉬운 디버깅실제 연구에 따르면 Javascript 버그의 15%가 사전에 Typescript로 감지할 수 있다고 함가독성 및 생산성 향상함수 매개변수 등 어떠한 변수에 타입이 기입되어 있기 때문에 가동성 및 협업 환경에서도 이점이 있음사용 방

기존 React + 바닐라Js에선 props를 이용할 때 컴포넌트 매개변수란에 props키워드를 이용하여 사용했다.하지만 타입스크립트가 추가된 지금은 컴포넌트에서 props를 이용하는 방법이 다르다.리액트와 타입스크립트가 지원하는 React.FC라는 제네릭 타입이 있다

리액트 + 타입스크립트를 이용하여 간단한 양식 제출 로직을 만들어보겠다.submit 이벤트를 처리하기 위해 함수를 만들었다.하지만 이 코드는 e 매개변수에서 오류가 발생한다.이유는 간단하다.타입스크립트는 타입을 명시해야 하는데 e 매개변수가 any 타입이기 때문에 타입

useRef는 바닐라 자바스크립트의 getElementById나 querySelector와 같이 특정 DOM 요소에 접근할 때 혹은 리렌더링 없이(내부 변수의 초기화 없이) 데이터를 저장하고 싶을 때 사용한다.아래 코드는 현재 form 컴포넌트의 코드다현재는 ref={

이번엔 타입스크립트 환경에서 useState를 사용해보겠다.해당 state는 초기값으로 빈 배열 갖고 이후 input으로 들어오는 텍스트를 담는 객체를 추가해줄 것이다.이후 그 리스트를 화면에 렌더링할 것이다.하지만 위 처럼 코드를 작성하면 에러가 발생한다.역시 타입스

Todo 리스트를 만드는 작은 프로젝트를 만드는 중이다.상위 컴포넌트에서 todo 항목이 들어간 배열을 관리하고 하위 컴포넌트(Todo 항목 컴포넌트와 Todo 항목 추가 컴포넌트 등)에서 CRUD를 진행한다.이번에 구현 중인 기능은 하나의 Todo 항목을 클릭하면 해