react 검색 결과

해당 글 5건

React Hooks : useContext ( + with TS)

Context : ko.reactjs.org/docs/context.html#when-to-use-context useContext : ko.reactjs.org/docs/hooks-reference.html#usecontext 기존에 사용하던 원리와 동일합니다만, 훅을 사용하게 되면서 Provider와 context 생성만 하게 되었습니다. Consumer가 없어지고 useContext를 사용하여 더 간결하고 편리하게 Context를 사용할 수 있습니다. 0. 요약 // 생성 const MyContext = React.createContext(defaultValue); // 최상위 컴포넌트를 Provider로 감싸면 됩니다. // useContext로 context의 값을 가져와 사용합니다. const..
React, Next, Redux/🚀 React with Hooks 2020. 3. 24. 02:53

React Hooks : useState, 비동기적 속성과 함수형 updator

🚓 hooks가 뭐야 class componenet에서 state, ref를 사용하는 걸 functional components에도 사용할 수 있게 만든 거다. (매우 간단!) 따라서 class components를 사용하지 않아도 되었고 React 측에서도 Hook의 사용을 권장한다. => 함수형 프로그래밍 스타일로 코딩 가능해짐 다음은 우리가 줄 곧 사용해 온 일반적인 클래스 컴포넌트이다. React.Component에서 extends 해주고 state 만들어주고 state를 수정할 경우에는 this.setState({})를 사용하며 컴포넌트의 라이프 사이클에 맞춰서 render()가 실행된다. 위와 같은 클래스 컴포넌트를 Hook으로 고쳐보았다. useState를 이용하여 state를 수정하기 쉽게..
React, Next, Redux/🚀 React with Hooks 2020. 3. 20. 21:53

React에서 Typescript 사용하기

시작 npx create-react-app [원하는 이름] --template typescript 직접 tsconfig.json 등을 만들어 가며 바닥부터 만들 수도 있지만 빠른 시작을 위해 위와 같은 툴체인을 사용하자. --typescript 옵션을 주고 create-react-app을 하면 js와 jsx가 아니라 ts와 tsx가 생성된다. 뿐만 아니라 package.json에도 새로운 게 추가되었고 tsconfig.json이라는 파일도 생성 되었다. tsconfig.json의 설정을 통해 특정 규칙을 끄고 켤 수도 있고 얼마나 strict할 지 결정할 수도 있기 때문에 TS를 잘 쓰려면 tsconfig.json을 잘 다룰줄 알아야 한다. tsconfig.json에 대한 설명은 아래에 정리해두었습니다...
React, Next, Redux/⚛ React.TS 2020. 3. 18. 02:48

children prop의 사용

React에서는 children이라는 reserved prop이 존재한다. "Children are the components that are placed inside the component."란다. import React from "react"; import MyComponent from "./MyComponent"; // MyComponent 라는 컴포넌트 사이에 '리액트'라는 문자열이 있습니다. // 라고 간단히 쓸 수 있지만 이 경우에는 children을 만들어주기 위해... function App() { return 리액트; } // props에는 자동으로 children 요소가 생깁니다. 이를 활용할 수 있습니다. const MyComponent = (props) => { return ( {..
React, Next, Redux/⚛ React.JS 2020. 3. 17. 17:01

react-router-dom v5

react-router Declarative routing for React www.npmjs.com React Router: Declarative Routing for React Learn once, Route Anywhere reacttraining.com react-router에는 다양한 컴포넌트들이 있는데 그 중에서 우리는 일단 react-router-dom만 사용해보도록하자 npm install react-router-dom react-router-dom 모듈에서 주로 사용하는 건 HashRouter, BrowserRouter, Router, Link, Switch, Redirect, withRouter, useParams(rrd에서 제공하는 4개의 훅 중 하나) 등이다. Router들 (Has..
React, Next, Redux/⚛ React.JS 2020. 2. 29. 20:09