React, Next, Redux 검색 결과

해당 글 93건

Context API 상태 관리 라이브러리

context api를 사용하고 싶다면 이제 useContext 훅과 같이 사용합시다. darrengwon.tistory.com/182 React Hooks : useContext Context : ko.reactjs.org/docs/context.html#when-to-use-context useContext : ko.reactjs.org/docs/hooks-reference.html#usecontext 기존에 사용하던 원리와 동일합니다만, 훅을 사용하게 되면서 Provider와 c.. darrengwon.tistory.com 밑에 밑에 밑에 컴포넌트에 props를 전달한다고 생각해보자. const App = () => {......} const User = ({user}) => {... {...} 이..
React, Next, Redux/⚛ React.JS 2020. 3. 23. 15:57

React Hooks : useRef(), ref

Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org React Hooks : useRef() 함수 자바스크립트에서 특정 DOM 을 선택해야할 때는 DOM Selector를 사용한다. 리액트 프로젝트에서도 특정 요소의 크기를 가져온다거나, 포커스를 설정해야한다거나 특정 DOM을 선택해야할 상황이 있다. 이런 경우,.. xiubindev.tistory.com useRef() 훅을 사용할 수 없는 클래스형 컴포넌트의 경우에는 React.createRef()를 사용합니다. ref + useRef() useRef나 ref는 getElementById()나 querySelector()와 같은 역할을 한..
React, Next, Redux/🚀 React with Hooks 2020. 3. 22. 18:57

react-create-app breakdown + Webpack 기초

create-react-app을 하면 자동으로 웹팩 설정 등 react를 구동하기 위한 작업을 이미 다 해주지만 그 내부 원리를 알아둘 필요가 있다. npm init npm i react react-dom npm i -D webpack webpack-cli npm i -D @babel/react //react를 사용하므로 react babel을 설치합니다. npm i -D @babel/preset-env //babel의 preset 중 env를 선택합니다. npm i -D @babel/core //babel의 핵심을 설치합니다 npm i -D babel-loader // 바벨과 웹팩을 연결해주는 도구입니다. 설치 후에는 public하게 보여줄 index.html, src에서 index.html로 Reac..
React, Next, Redux/⚛ React.JS 2020. 3. 21. 05:08

React Hooks : useEffect

페이스북 공식 문서에 따르면 useEffect를 리액트의 class 생명주기 메서드에 친숙하다면, useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다. 라고 한다. 결국 각 라이프 사이클 단계 중 최종적으로 실행되는 것이다. 어쨌거나 render() 이후에 실행되면서 동시에 매번 어떤 동작이 일어날 때마다 작동한다. useEffect는 렌더링 이후에 매번 수행되는 걸까요? 네, 기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행됩니다 🚗 Component Lifecycle Mounting : constructor(), render(), componentDidMount() Updati..
React, Next, Redux/🚀 React with Hooks 2020. 3. 21. 05:08

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

props vs state

props와 state를 별 생각없이 활용해오던 편이었는데 둘의 차이를 생각해보자. props가 컴포넌트를 외부(정확히는 부모 컴포넌트) 수준에서 정의하고 (자식 컴포넌트에서) 사용하는 것이라고 한다다. 즉, 부모에서 자식으로 아래 쪽으로만 움직인다. state는 자식들의 props를 공유하는 것이라고 볼 수 있다. React 공식 자습서에서는 "기억하게" 만드는 것이라고 하고 있다. 많은 코더의 설명에 따르면, 바뀌는 정보는 state, 바뀌지 않는 정보는 props라고 한다. 내 설명으로는, 부모에서 자식 컴포넌트로 데이터를 전달하는 것은 props이다. 또, state를 props로 전달하여 활용할 수도 있다. state는 다음과 같이 활용한다. Subject와 Nav컴포넌트의 props로 stat..
React, Next, Redux/⚛ React.JS 2020. 3. 17. 20:37

React Developer Tools

React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 355970aa4 on 3/3/2020. chrome.google.com 개발자 도구에서 컴포넌트와 props 등을 확인할 수 있는 매우 유용한 Chrome extension app이다. 개발자 도구에서 CSS를 수정하고 실시간으로 확인할 수 있듯 이 툴을 통해서 props를 수정할 수도 있으며 컴포넌트가 무엇에 의해 렌더링 되었고 위치가 어느 곳인지도 확인할 수 있다. 재 렌더링 되는 곳을 확인하고 이를 최소화하는 방향으로 최적화하기 위해서 반드시 Hightlight updates when components render를..
React, Next, Redux/⚛ React.JS 2020. 3. 17. 19:33

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

Container + Presenter Pattern 디자인 패턴

함수형 컴포넌트와 Hook이 사실상 표준이 되면서 이 패턴은 구식이 되었다. 종종 컴포넌트 하나가 너무 커질 때 이 패턴으로 구분하기도 하지만 일반적으로 사용되지는 않는듯. container presenter pattern 코딩 패턴이다. express에서 MVC design pattern에 근거해서 코딩 했듯이 React.js에서 사용하는 코딩 패턴이다. container 컴포넌트와 presenter 컴포넌트를 분리하는 것이 포인트이다. container 컴포넌트는 논리 담당이다. data와 api, 논리 구조, state(상태값)를 갖고 있다. 클래스 컴포넌트이다. presenter 컴포넌트은 시각 담당이다. data를 보여준다. state도 없고 클래스도 없는 함수형 컴포넌트가 주이다. 다음과 같이..
React, Next, Redux/⚛ React.JS 2020. 3. 16. 01:43