본문 바로가기

React128

React - Input 실행오류 A component is changing an uncontrolled input to be controlled. 수정 페이지 에서 input 창에 입력된 값을 동적으로 받아오다가 아래와 같은 워닝을 받게 되었다. 이 에러는 uncontrolled input 이었다가 → controlled input 으로 바뀌면서 생긴 에러이다. 한마디로 초기값이 undefined 이었다가 → 렌더링 후에 값이 들어와 바뀌었기 때문이다. 리액트 공식문서와 블로그를 참고하여 해결하여 보자 React는 두 가지 방식으로 form 입력을 처리합니다. React에 의해 입력값이 제어되는 엘리먼트를 제어 컴포넌트(controlled component) 라고 합니다. 사용자가 제어 컴포넌트에 데이터를 입력하면 변경 이벤트 핸들러가 호출되고 코드가 (업데이트된 값으로 다시 렌더링에 의해) 입력의 유효 여부를 결정합니다. 다시 렌더링하지 않으면 .. 2022. 3. 6.
React(63) TypeScript - Pick 으로 객체에서 특정타입만 골라 사용하기 지난 시간에는 Omit 으로 타입에서 사용하지 않는 프로퍼티들을 제외시키고 자유롭게 사용해보았다. 이번 시간에는 Pick 으로 타입에서 사용할 프로퍼티들만 골라서 자유롭게 사용해보자. Hoxy, 오밋(Omit) 이랑 비교해보고 싶으시다면 ... ? 지난 포스팅보기 ↓↓↓ React(62) Omit 으로 객체에서 특정 타입 빼고 사용하기 보통 타입스크립트에서 객체의 타입을 정의할 때, 있어도 되고 없어도 되는 타입(optional property) 옆에는 ? (물음표) 를 붙여서 정의하였다. 타입 스크립트는 꽤나 엄격한 언어라 값을 할당하지 않 devbirdfeet.tistory.com React(63) Pick 으로 객체에서 특정타입만 골라 사용하기 아래의 댓글 타입에서 나는 id , comment 만 .. 2022. 3. 1.
React(62) TypeScript - Omit 으로 객체에서 특정 타입 빼고 사용하기 보통 타입스크립트에서 객체의 타입을 정의할 때, 있어도 되고 없어도 되는 타입(optional property) 옆에는 ? (물음표) 를 붙여서 정의하였다. 타입 스크립트는 꽤나 엄격한 언어라 값을 할당하지 않으면 에러가 발생하기 때문이다. interface User { id: number; name: string; age: string; school?: string; // 학교는 선택항목이라 ?를 붙이게 됨 } 하지만 Omit 이라는 기능을 사용하면 객체에서 선택적으로 사용하는 속성은 ? 로 정의하지 않아도 알아서 제외된다는 것을 알게 되었다. 이 좋은 기능을 나만 알 순 없지. 자, Omit 사용하러 가보자 React(62) Omit 으로 객체에서 특정 타입 빼고 사용하기 은 특정 속성만 제거한 타입.. 2022. 2. 25.
React(61) React Toolkit - createSelector 사용하기 리액트 툴킷에는 createSeletor 라는 기능이 있다. 직접 사용해보면서 느끼기엔 useSelector 안에서 구구절절 이게 뭔지 어쩌고 저쩌고 정의하던 시절에서 벗어나 깔끔하게 "열려랏 참깨!" 라고 간단하게 명령해주면 되는 느낌을 받았다. (추가 장점 updated) useSelector 가 실행될 때마다 그 안에 정의된 함수는 매번 새로운 배열을 반환하게 되면서 이전에 참조하고 있던 객체 주소가 현재 주소와의 차이를 발생시키게 된다. 그리고는 re-rendering 을 발생시키는데 이때 재계산이 필요한 상태 트리의 사이즈나 계산 비용이 크다면 성능 문제로 이어질 수 있습니다. ref: http://blog.hwahae.co.kr/all/tech/tech-tech/6946/ 자, 이제 이게 뭔지.. 2022. 2. 19.
React(60) Redux-toolkit 사용하기 리덕스 툴킷은 리덕스를 편하게 사용하기 위한 리덕스공식 개발 도구이다. 여태까지 리덕스를 잘 사용하기 위해서는 4~5개의 라이브러리를 함께 사용해야 했다. 하지만 Redux Toolkit 은 내장된 기능으로 saga를 제외한 나머지 라이브러리를 대체할 수 있다. redux-actions (많아지는 액션을 관리하는 라이브러리) immer (상태값의 불변성 보존을 위한 라이브러리) reselect (store값을 효율적으로 핸들링하여 불필요한 리렌더링을 막기 위한 라이브러리) redux-thunk (액션을 비동기적으로 만들수있는 라이브러리) redux-saga React(60) Redux-toolkit 이란 쉽게 말해서 기존 리덕스는 사용되는 코드가 많았다. (액션타입도 적어주고... 액션도 작성하고 리듀서.. 2022. 2. 17.
Styled-components(5) first-child와 last-child 사용하기 현업에서 스타일드 컴포넌츠를 쓰기 시작한지 얼마 되지 않은 시점에 당황했던 부분을 잊지 않기 위해 기록을 남겨본다. styled-components 에서 last-child 를 사용해보자. 결과화면 미리보기 이 두 개가 있다. 두 번째 버튼의 margin-left 만 주려고 한다. 이때 나는 last-child 를 사용하고 싶다. 자, 그럼 styled-components 에서 last-child 를 사용해보자 Styled-components(5) first-child와 last-child 사용하기 import styled from 'styled-components'; // 일단 임포트 해주시고 // 스타일드 컴포넌트로 들을 감싸주었다 이전 다음 스타일드 컴포넌트 내에서 &:last-child 를 사용한.. 2022. 2. 14.
React(59) 맵(Map) 사용하기 - set / get / has / delete / clear / size 우리는 보통 데이터를 담는 그릇 (a.k.a 자료구조) 으로 객체나, 배열을 많이 사용한다. 하지만 사용하다 보면 여러가지 형태의 자료구조가 필요하다. 그중 하나인 맵(Map) 을 알아보자. 객체 – 키가 있는 컬렉션을 저장 배열 – 순서가 있는 컬렉션을 저장 맵(Map) 이란 일단 겉 모습은 객체랑 비슷하다. 쉽게 말해 커스텀이 가능한 객체 느낌이다. 키-값 쌍을 저장하며 각 쌍의 삽입 순서를 기억한다. 또한 Map 은 함수, 객체 등을 포함한 모든 값을 키와 값으로 사용할 수 있다. 일반적인 object 는 순서를 기억하지는 않는다. 리액트에서 맵(Map) 사용하기 1. new Map() – 맵 만들기 (리액트에서는 useState 로 맵을 선언했다.) // useState 로 타입이 맵인 변수 ar.. 2022. 2. 4.
React(58) - 화살표 회전 애니메이션 만들기 새발자는 리액트로 드롭박스를 만드는 중이다. 전체보기를 클릭하면 아래에 촤라락 하위메뉴가 펼쳐진다. 애니메이션을 추가하여 아주 자연스럽게 화살표를 뱅그르르 회전시켜보자. 결과화면 미리보기 [ 전체 보기 ] 버튼 옆에 달린 화살표의 방향 클릭할 때마다 바뀐다. 이 때 회전 애니메이션을 추가해볼 것이다. React(58) - 화살표 회전 애니메이션 만들기 useState 의 상태값은 스위치 역할을 한다. 클릭할 때마다 메뉴를 펴고 접으면서 화살표 방향이 달라질 것이다. 접힌 상태이기 때문에 기본값은 false 로 두자. // useState 로 스위치 역할을 할 상태값 변수를 선언해준다. 기본값은 false const [showCate, setShowCate] = useState(false); HTML on.. 2022. 2. 3.
React(57) Redux 로 객체배열 저장하기 (redux 상태관리) 처음에는 리덕스의 개념을 이해하는 것이 쉽지 않았다. 하지만 코드를 보며 몇 번 적용해보니 기본적인 개념이 이해가 되었다. 내가 생각하는 리덕스란 보통 데이터를 주고받을 때, 부모 - 자식 컴포넌트로 데이터를 전달하지만, 이곳저곳에서 다양하게 공통으로 쓰이는 글로벌 데이터라면, 자식-부모-조부모-삼촌-조카 이런식으로 여러 컴포넌트로 복잡하게 전달해줘야 할 것이다. 글로벌 저장소에 데이터를 저장해놓고 필요할때 어디서든 간단하게 소환할 수 있도록 하는 라이브러리가 리덕스(Redux) 라고 생각한다. Redux-persist 란 리덕스를 사용해서 글로벌 저장소에 들어간 데이터는 아쉽게도 새로고침 한방이면 초기화되며 수명을 다한다. 이때 Web Storage에 저장해줘야 하는데 저장과 삭제를 쉽게 해주는 라이브.. 2022. 2. 1.
반응형

티스토리툴바