리액트20 [React] useState 활용해서 사전에 객체의 Template 설정해야 하는 이유 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 에러 메시지 antd table Each child in a list should have a unique "key" prop. Check the render method of `Body`. 작업 도중에 위와 같은 메세지가 떴다. ㅎㅎ 상큼하다. 초급 개발자인 나는 한동안 해메이다 답을 찾았는데, useState로 객체를 설정해두어야 한다는 것이다. const [data, setData] = useState({ res.. 2021. 4. 28. [Redux] 왜 쓸까? props의 상태 값에 따라 구동되어야할 함수들이 서로 의존적이지 않고 독립적으로 작성하기 위해서이다. 그래서 props에서 state(상태)가 변경되면, 그에 맞춰서 Action을 해주는 것을 reducer에서 정의하고, dispatch를 이용해서 render에 전달해주는 것이다. 이렇게 작성해야, reducer에서 정의한 상태값에 따라 작동되어야 할 Function(함수)들을 독립적으로 작동되게끔 작성하는 것이 가능하다. 함수도 단순하게 할 수 있으며, 리액트의 (독립적인)컴포넌트 구현 개념과도 일치하게 된다. Redux - 5.3. Redux의 적용 : state의 변화에 따라서 UI 반영하기 by 생활코딩 조금 더 깊게.. 조금 더 깊게 들어가면, dispatch가 전달해주는 action.type.. 2021. 2. 17. [React] useEffect 는 무엇인가? 간단하게 말하면, Render 이후에 처리하는 함수이다. Render가 되었다는 것은 DOM 구조까지 이미 생성이 모두 완료된 시점이다. 이 시점에 처리해야 할 일들을 effect에 모아두었다가 처리하는 것이다. DidMount, DidUpdate, willUnmount 이 세가지 상황에 쓰인다. 참조 : ko.reactjs.org/docs/hooks-effect.html#example-using-hooks-1 2021. 2. 2. [Redux] Redux를 써야 하는 이유? 상태가 변경되었을 때 처리해야 하는 요소를 통합적으로 처리하기 위해서. 효율성을 위해서 사용한다. 미 사용했을 때는 아래와 같은 일이 발생한다. 출처 : 생활코딩 youtu.be/bn-8isrtx0k?t=356 2021. 2. 1. [React] useRef() 는 언제 사용하는가? 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com React에서 useRef를 사용하는 경우는 다음과 같다. useRef는 리렌더링 하지 않는다. 컴포넌트의 속성만 조회&수정한다. 1. 컴포넌트에 focus를 위치시킬 필요가 있는 경우. - 예를 들어, 값을 여러개 일력하고 첫 번째 칸으로 이동해야 하는 경우 필요하다. //InputTest.js import React, { useState, useRef } from 'react'; function InputTest(.. 2021. 1. 29. [React] 함수형 프로그래밍을 가능하게 하는 React Hook (부재 : useState가 이렇게 쉬운 것일 줄은...) 리액트 공식문서의 순서도 이제 변경해야 할 것 같다. React Hook을 먼저 설명하고 나머지 내용을 설명하는 게 오히려 낫겠다 싶을 정도다. 초심자일 경우, class 구문을 익히기 전에 아예 리액트훅을 먼저 익히고 나서 class 구문을 익히도록 하자. 나도 초심자라 그런지 react 자체가 잘 이해가 가지 않아서 처음에 많이 헤맸다. 헤메었던 것을 잊지 않기 위해 기록해둔다. 이 글을 보고 있는 동지여 힘내라. hook.jsx import React, { useState } from "react"; function Hook() { const [item, setItem] = useState(0); function plusItem() { setItem(item + 1); } function minus.. 2021. 1. 28. 이전 1 2 3 4 다음
