개발 블로그

앞으로 벨로그에서 블로그 활동을 이어갑니다. https://velog.io/@tune2654

Redux를 React에서 사용하는 방법을 알아본다. React-redux 설치 터미널에서 아래의 명령어를 실행한다. npm i redux react-redux Provider index.js 에서 Provider 컴포넌트로 App 컴포넌트를 감싼다. 그리고 store.js 파일을 임포트하여 Provider의 props로 전달한다. 이렇게 하면 최상위에 store가 연결되므로 각각의 컴포넌트에 store를 임포트해야하는 번거로움이 줄어든다. import { Provider } from 'react-redux'; import store from './store'; ReactDOM.render( , document.getElementById('root') ); store.js 에 store, reducer,..

Redux란 Redux는 애플리케이션의 복잡성을 낮춰 결과를 예측가능하게 만들어주는 글로벌 상태 관리 라이브러리이다. Redux 설치 터미널에서 아래 명령어를 실행한다. npm i redux Redux의 특징 - 한 곳에서 데이터를 중앙집중관리한다. - 상태를 바꾼다. - 외부에서 직접 제어할 수 없어 예기치않게 값이 바뀌는 문제를 차단한다. - 다른 컴포넌트에 상태를 알려준다. Redux 관련 개념 1. state(상태) - 리덕스 애플리케이션의 전체상태를 나타내는 단어 - store에 의해 관리된다. - state는 직접 접근하여 조작할 수 없다. 2. store(스토어) - 모든 state 정보가 저장되는 곳 - 애플리케이션 상태 트리를 가지고 있는 객체. - 리덕스 앱에서는 단 하나의 스토어만 가..

리액트 컴포넌트 작성 방식에는 클래스형 컴포넌트와 함수형 컴포넌트가 있는데 Hooks는 함수형 컴포넌트 작성 방식이 되겠다. 기존의 리액트 함수형은 state와 라이프 사이클을 구현할 수 없어 아주 간단한 기능만을 수행했었는데, Hooks가 등장하게 되면서 클래스형처럼 state와 라이프 사이클 구현이 가능하게 되었다. hooks에서는 state가 바뀌면 함수가 통째로 재실행되기 때문에 조금 느릴 수 있다. useState useState는 class의 state와 동일하게 초기값을 지정해줄 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function App() { const [funcShow, setFuncShow] = useState(true); cons..

HTML head 태그 안에 자바스크립트 파일을 임포트 했을 때, 어떤 속성이냐에 따라 다운로드, 실행되는 방법이 달라진다. 1. 속성이 없는 경우 1 2 3 cs html을 파싱하다가 script를 만나면 html 파싱을 중단하고 우선 script 파일을 다운로드한 후 실행을 한다. 이어서 나머지 html를 파싱한다. script를 실행하는 구간에서 html 파싱이 잠시 멈추게 되어 시간이 걸린다. 2. async 1 2 3 Colored by Color Scripter cs async 속성은 html을 파싱하다가 script 파일을 만나면 html과 script가 병렬적으로 동시에 다운로드 되고, 다운로드가 빨리 끝난 script 파일부터 실행하게 된다. script 파일이 실행이 되는 구간에는 ht..

컴포넌트는 다음과 같이 생명주기를 가지고 있다. 1. componentDidMount: 컴포넌트가 최초로 렌더링 된 후 호출되는 함수(생성) componentDidMount는 render가 되고 나서 실행된다. componentDidMount는 주로 비동기 요청을 할 때 사용한다. 컴포넌트가 생성되면 아래와 같이 차례로 실행된다. 1) constructor: 클래스가 생성될 때 호출되는 생성자 함수 2) render: 화면에 컴포넌트를 표시하는 함수 3) componentDidMount: render가 되고 나서 실행되는 함수 2. shouldComponentUpdate: 조건에 따라 렌더링을 막을 수 있는 함수, 성능 최적화에 유용 true이면 렌더링 되고 false이면 렌더링이 되지 않는다. 3. c..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 render() { const { isLoading, movies } = this.state; return ( {isLoading ? ( Loading... ) : ( {movies.map((movie) => ( ))} )} ); } Colored by Color Scripter cs map 아래 코드는 movies라는 배열 안을 돌면서 Movie라는 컴포넌트를 생성하며 이 컴포넌트의 props 값으로 배열의 요소를 넣어주고 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 {movies.map((movie) => ( ))} Colored by Color Scripter ..

1 2 import React, { Component } from 'react'; import Subject from './components/Subject'; cs 리액트 프로젝트를 시작하기 전에는 반드시 파일의 맨 위에 react를 import 하도록 한다. 다른 파일을 현재 파일로 가져올 때도 Subject와 같이 import 한다. props 1 2 3 4 5 6 7 8 9 10 11 12 13 14 render() { return ( { this.setState({ mode: 'welcome' }); }} > ); } Colored by Color Scripter cs 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용한다. 컴포넌트 내부의 immutable data (변경되지 않는 데이..