Redux란 Redux란 웹 어플리케이션의 상태 관리를 위한 오픈소스다. Redux - A predictable state container for JavaScript apps. | Redux A predictable state container for JavaScript apps. redux.js.org 리액트에선 컴포넌트간 property 전달을 줄이기 위해 사용된다. react-redux React Redux | React Redux Official React bindings for Redux react-redux.js.org Redux 동작 방식 Redux는 상태 관리를 위해 사용된다. 즉 상태를 관리하며, 업데이트 하고 상태에 접근하는데 사용되는 프레임워크다. Redux는 다음과 같은 방식으로 진행된다. 앱.. 더보기 React prop drilling 리액트에선 프로퍼티를 전달하기 위해 부모객체에서 자식 컴포넌트를 사용할때 attributes로 속성값을 넣어주게 되고, 자식 컴포넌트에서 해당 속성을 받아서 사용하게 된다. Parents Child const Child = (props) => {} 하지만 앱의 구조가 복잡해지게 되고 부모 자식의 관계가 많아지게 된다면 속성 전달을 위해 거쳐가는 노드가 많아지게 된다. 만약 전달해야할 자식노드까지 10개의 컴포넌트를 거쳐야 한다면 10개의 컴포넌트에서는 자신이 사용하지 않는 프토퍼티 값을 전달을 위해 받아야 하는 상황이 나오게 된다. 이러한 현상을 해결하기 위해 전역 state관리에 대한 솔루션들이 나오기 시작했다. 더보기 React 컴포넌트 스타일 styled-component 컴포넌트에 스타일을 입히는 방법은 여러 가지가 있지만 여기선 styled-component를 사용하여 스타일을 입히는 방법에 대해 설명한다. 우선 styled-component를 설치해야한다. npm install -g styled-components styled 사용법 예제를 보면 다음과 같다. import React, {useState, useEffect} from "react"; import styled from "styled-components"; const Div = styled.div` color:red; &:hover { color:cyan; } ` function Counter() { const [a, set_a] = useState(0); return ( {a} { set_a(prev_a.. 더보기 리액트 Hooks Hooks는 함수형 컴포넌트에서도 클래스형 컴포넌트의 State사용이라던지, 라이프 사이클 메소드와 같은 기능들을 사용할 수 있게 해준다. https://reactjs.org/docs/hooks-overview.html Hooks at a Glance – React A JavaScript library for building user interfaces reactjs.org useState useState는 컴포넌트의 가변상태를 나타내줄 수 있는 hook이다. 이 hook을 통해 컴포넌트 내 state를 유지하며, state가 setter를 통해 업데이트 되게되면 뷰를 갱신하게 됩니다. Counter.js import React, {useState} from "react"; function Counter.. 더보기 React 컴포넌트 React 컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다. 클래스형 컴포넌트는 함수형 컴포넌트의 기능 + state기능, 라이프 사이클 기능이 추가된 것이다. React에서는 클래스형 컴포넌트 개발 방식에 대해 지원하겠다 하지만, 새로 개발되는 컴포넌트의 경우에는 함수형 컴포넌트를 우선적으로 할것을 권장한다. 굳이 클래스형 컴포넌트를 함수형 컴포넌트로 바꿀 필요는 없지만 함수형 컴포넌트로 개발을 우선적으로 생각해볼 필요는 있다. 해당 포스팅에서는 컴포넌트의 대략적인 기능을 함수형 컴포넌트로 설명하고, 클래스형 컴포넌트에서는 어떻게 사용하는지에 대해 설명한다. 첫번째 컴포넌트 firstComponent.js import React from 'react'; const MyComponent = .. 더보기 첫번째 React 앱 만들기 create-react-app을 통해 리액트 개발을 위한 설정을 완료하였다면, 해당 디렉토리안에 src라는 디렉토리가 있을것이다. 이 디렉토리가 개발이 이루어지게 되는 디렉토리다. JSX 우선 JSX에 대해 언급하고 갈 필요가 있다. JSX는 마크업 언어의 형태를 띄고 있지만 이 코드는 실제 동작을 위한 코드는 아니다. 이 코드들은 babel 이란 모듈을 통해 실제 동작하는 js코드로 변환이 되어 동작이 이루어지게 된다. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 리액트 최초 세팅 .. 더보기 React란 React란 웹의 View를 위한 라이브러리로써, 웹의 DOM을 가상화 하여 DOM 랜더링을 최대한 줄여 자원 낭비를 최소화 한다. https://reactjs.org React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org React 설치 React는 npm을 통해 설치하게 된다. npm install -g create-react-app 첫번째 React 앱 만들기 React 앱은 다음 명령어를 통해 만들 수 있다. npx create-react-app {앱 이름(디렉토리 이름)} 기본 설정이 끝난 후 해당 디렉토리로 들어가 아래 명령어를 통해 r.. 더보기 이전 1 다음
