react35

• 

  [Redux] Redux를 써야 하는 이유? 상태가 변경되었을 때 처리해야 하는 요소를 통합적으로 처리하기 위해서. 효율성을 위해서 사용한다. 미 사용했을 때는 아래와 같은 일이 발생한다. 출처 : 생활코딩 youtu.be/bn-8isrtx0k?t=356 React & TypeScript/Recoil 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(.. React & TypeScript/React 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.. React & TypeScript/React 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" 값을 받아주는 역할을.. React & TypeScript/React 2021. 1. 27.

• 

  React UI Component Setup Error 해결방법 해결 방법은 아주 간단했다. package.json 파일을 열고, "homepage": ".", Dev-Basic/npm 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가 전달되고 .. React & TypeScript/React 2021. 1. 21.

• 

  React Hook 개념 요약 요약 아래 코드를 한 줄 한 줄 살펴보고, 얼마나 이해했는지 체크해봅시다. 1: import React, { useState } from 'react'; 2: 3: function Example() { 4: const [count, setCount] = useState(0); 5: 6: return ( 7: 8: You clicked {count} times 9: setCount(count + 1)}> 10: Click me 11: 12: 13: ); 14: } 첫 번째 줄: useState Hook을 React에서 가져옵니다. 네 번째 줄: useState Hook을 이용하면 state 변수와 해당 state를 갱신할 수 있는 함수가 만들어집니다. 또한, useState의 인자의 값으로 0을 넘겨주면 .. React & TypeScript/React 2021. 1. 20.

• 

  React Component 생성 & 사용하는 방법 React Component 리액트 컴포넌트는 html 요소들을 반환하는 것이라고 할 수 있다. 컴포넌트는 만들고 싶은 만큼 만들고, 각각 파일로 분리해서 관리한다. 하지만 React application은 한 번에 하나의 컴포넌트만 rendering 할 수 있다. 따라서 모든 것은 App.js에 모두 들어가야하고, 이 application 안에서 많은 컴포넌트를 넣고 import할 수 있다. 그리고 컴포넌트는 일종의 UI 조각이라고 할 수 있다. 따라서 쉽게 재사용이 가능하다. 컴포넌트 여러 곳에서 여러 번 불러와서 사용할 수도 있다는 것이다. React Component 생성 1. src 디렉토리에 Hello.js 파일 추가 2. import & 함수 또는 클래스 형태 & export 코드 작성 He.. React & TypeScript/React 2021. 1. 7.

• 

  PureComponent와 Component의 차이 PureComponent와 Component의 차이 React.PureComponent는 사실 React.Component와 비교해서 딱 한가지만 다르다 react의 생명주기 메서드중 하나인 shouldComponentUpdate를 어떻게 쓰는가 하는 부분이다. shouldComponentUpdate() shouldComponentUpdate()는 props 또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출된다. 기본적으로 shouldComponentUpdate() 메서드의 return값은 true 인데 false를 반환할 경우 render()와 componentDidUpdate()는 호출되지 않는다. component : shouldComponentUpdate React.Comp.. React & TypeScript/React 2021. 1. 4.

• 

  State & Props 정의 가장 명확하게 설명해 둔 글 같아서 기록해둔다. 여기 저기서 정의한 내용보다 훨씬 낫다. 1. State 컴포넌트 안에서 우리가 정의한 컴포넌트의 state 오브젝트 입니다. 컴포넌트 UI를 위한 데이터를 보관하는 오브젝트로, 이 state라는 오브젝트를 통해서 데이터에 업데이트가 발생하면 리액트가 자동적으로 우리가 구현한 render 함수를 호출하죠. 이 부분은 아마 제가 개념 설명을 할때 많이 얘기 해서 잘 아실것 같아요 🙌 2. Props 컴포넌트 밖에서 주어지는 데이터 입니다. 컴포넌트 안에서 자체적으로 데이터를 정의해서 사용하는 State와는 다르게, Props은 컴포넌트 외부에서 데이터를 제공받습니다. 가장 근본적인 이유는 컴포넌트의 재사용을 높이기 위해서죠 :) 상황에 따라 주어진 데이터를 .. React & TypeScript/React 2020. 12. 21.

• 

  React Hook이 생긴 이유... 리액트 = Component 만드는 방법은 Class, Function으로 만들 수 있다. 주기적으로 업데이트하기 위해서 Class에서 할 수 있는데, Class에서는 State라는 Object가 있어서 값이 변할 때마다 재 호출이 가능하다. 이 State는 Component 상태 값을 표현해서 생명주기 (Lifecycle Methods)를 관리하는 것이 가능하다. Function에서는 State 같은 것이 없었다. 그런데 React Hook 이 class에서 lifecycle을 관리하는 것과 똑같은 기능을 지원하는 것이 생겼다. (React ver 16.8) 생긴 이유는 Script를 다루던 개발자들이 Class 이해를 어려워해서 똑같은 기능이 생긴 것이다. (class is difficult...?... React & TypeScript/React 2020. 12. 17.