본문 바로가기

react35

[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.
[React] Props란 무엇인가? function Welcome(props) { return Hello, {props.name}; } function App() { return ( ); } ReactDOM.render( , document.getElementById('root') ); App function이 있는 이유는 return에서 여러 개의 복합적으로 구성된 Component를 한번에 ReactDOM.render에 보내기 위해서이다. 정확히는 index.html에 있는 div class=root 에 보내기 위해서이다. props는 객체 생성 시에 지정되는 value를 받아서 처리하기 위한 react에만 있는 유니크한 정의이다. (위에서는 Welcome 을 생성 시에 "Sara", "Cahal", "Edite" 값을 받아주는 역할을.. 2021. 1. 27.
React UI Component Setup Error 해결방법 해결 방법은 아주 간단했다. package.json 파일을 열고, "homepage": ".", 2021. 1. 22.
[React] 10. React 상태 올리기 (React Lifting State Up) 상태 올리기의 원리는 간단합니다. 하위 Component에 props로 상위 Component의 함수를 전달해 주고, 하위 Component 에서는 그 함수를 호출하는 것입니다. 주의사항 가장 가까운 상위 Component로 전달한다. 무조건적으로 최상위 App Component로 올리지 않는다. 그러나, 되도록 하향식 데이터 흐름에 초점을 두고 작업하는 것이 좋다. 참고 : ko.reactjs.org/docs/state-and-lifecycle.html#the-data-flows-down State and Lifecycle – React A JavaScript library for building user interfaces ko.reactjs.org 상위 Component 함수로 prop가 전달되고 .. 2021. 1. 21.