KBennyCC

React.js 01.13. React Redux 리액트로 프로젝트에서는 최상위 컴포넌트에서 상태 관리 로직이 너무 많아져 코드가 길어지고 가독성이 떨어진다.  불필요한 리렌더링을 방지하기 위해서 하위 컴포넌트에서 shouldComponentUpdate를 구현하여 방지한다 하더라도 프로젝트가 복잡해질 경우 여러 컴포넌트를 거쳐 porps를 전달하는 것은 비효율적이다.  작업을 진행하면서 헷갈릴 수 있고, 실제로 컴포넌트 자기 자신은 필요하지 않은데 하위 컴포넌트 때문에 필요한 props 개수가 많아지기 때문이다. 추가로 형제 컴포넌트에서 불필요한 렌더링이 일어나기 때문에 이 역시 상황에 따라 방지를 해주어야한다. 이러한 문제점들은 리덕스라는 상태 관리 도구를 사용하면 매끄럽게 해결할 수 있다. 01.13.1. Redux 개념 상태를 더 효율적으로 관리하는데 사용하는 상태 관리 라이브러리이다. 리덕스는 상태 관리의 로직을 컴포넌트 밖에서 처리하는 것이다. 리덕스를 사용하면 스토어(store)라는 객체 내부에 상태를 담게 된다. 리덕스 적용 구조 리덕스를 사용하면 스토어에서 모든 상태 관리가 일어난다. 상태에 어떤 변화를 일으켜야 할 때는 액션(action)을 스토어에 전달한다.  액션은 객체 형태로 되어 있으며, 상태를 변화시킬 때 이 객체를 참조하여 변화를 일으킨다. 액션을 전달하는 과정을 디스패치(dispatch)라고 한다. 스토어가 액션을 받으면 리듀서(reducer)가 전달받은 액션을 기반으로 상태를 어떻게 변경시켜야할지 정한다. 액션을 처리하면 새 상태를 스토어에 저장한다. 스토어 안에 있는 상태가 바뀌면 스토어를 구독하고 있는 컴포넌트에 바로 전달한다. 부모 컴포넌트로 props를 전달하는 작업은 생략하며, 리덕스에 연결하는 함수를 사용하여 컴포넌트를 스토어에 구독시킨다. 스토어 : 애플리케이션의 상태 값들을 내장하고 있다. 액션 : 상태 변화를 일으킬 때 참조

React.js 01.12. React Component Rerendering 최적화 리액트에서는 Virtual DOM을 사용하여 필요한 DOM만 업데이트한다 고 했는데, 왜 최적화가 필요할까? 리액트는 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링된다. 여기에서 불필요한 리렌더링 이란 실제 웹 브라우저의 페이지에 나타난 DOM의 렌더링이 아니라 Virtual DOM에 하는 렌더링 을 의미한다. 리액트가 어떤 DOM을 변경할지 인지하려면 Virtual DOM에 모두 렌더링을 해야 한다. 이 과정에서 Virtual DOM에 하는 불필요한 리렌더링을 shouldComponentUpdate로 방지한다. 그러면 Virtual DOM에 렌더링하는 과정에서 render() 함수를 실행하지 않고, 이전에 썼던 DOM 정보를 그대로 사용하여 자원을 아낄 수 있다. 어떤 상황에서? 컴포넌트 배열이 렌더링되는 리스트 컴포넌트일때 리스트 컴포넌트 내부에 있는 아이템 컴포넌트일때 하위 컴포넌트 개수가 많으며, 리렌더링되지 말아야 할 상황에서도 리렌더링이 진행될 때 리스트를 렌더링할 때는 언제나 shouldComponentUpdate를 구현해 놓는 것을 습관화하는 것이 좋다.

React.js 01.11. 컴포넌트 CSS 적용 ( CSS Module, Sass, styled-components ) CSS Module :     모듈화된 CSS로 CSS 클래스를 만들면 자동으로 고유한 클래스네임을 생성하여 스코프를 지역적으로 제한하는 방법이다. Sass :     CSS 전처리기 중 하나로, 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성하는 방식이다. CSS Module 처럼 사용하는 방법도 있다. styled-components : JS 코드 내부에서 스타일을 정의한다. 01.11.1. CSS Module CSS Module 은 CSS를 모듈화하여 사용하는 방식으로 CSS 클래스를 만들면 자동으로 고유한 클래스네임을 생성하여 스코프 를 지역적 으로 제한한다. 모듈화된 CSS를 webpack으로 불러오면 사용자가 정의한 클래스 네임과 고유화된 클래스네임으로 구성된 객체를 반환한다. { box : 'src-App__box--mjrNr' } // 클래스 적용할 때는 아래와 같이 사용한다. className = {styles.box} 새로운 프로젝트를 생성한 후 CSS Module을 활성화한다. $ create-react-app study-css $ cd study-css $ yarn eject config/webpack.config.js 파일의 css-loader 설정 부분을 확인한다. const getStyleLoaders = (cssOptions, preProcessor) => { const loaders = [ isEnvDevelopment && require.resolve( ' style-loader ' ), isEnvProduction && { loader : MiniCssExtractPlugin.loader, opt

React.js 01.10. 함수형 컴포넌트 지금까지 컴포넌트는 class 문법을 사용하여 정의하였다.  import React , { Component } from 'react' ; class NewComponent extends React.Component { render() { return ( < div > Hello { this .props.name} < /div> ); } } export default NewComponent; 순수 함수만으로 컴포넌트를 선언할 수 있다. import React from 'react' ; function FuncComponent(props) { return ( < div > Hello {props.name} < /div> ) } export default FuncComponent; ES6 화살표 함수와 비구조화 할당 문법 사용하여 컴포넌트 선언 import React from 'react' ; // 1. {} 작성 const FuncComponent = ({name}) => { return ( < div > Hello {name} < /div> ) } // 2. {} 생략 const FuncComponent = ({name}) => ( < div > Hello {name} < /div> ) } export default FuncComponent; 함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등 불필요한 기능을 제거한 상태이기 때문에 메모리 소모량은 일반 클래스형 컴포넌트보다 적다. 리액트 프로젝트에서는 state를 사용하는 컴포넌

React.js 01.9. 컴포넌트의 라이프 사이클 리액트 컴포넌트에는 라이트사이클이 존재한다. 페이지에 렌더링되기 전 준비과정에서 시작하여 페이지에서 사라질 때 끝이난다. 라이프사이클 메서드는 총 열가지로 Will 접두가사 붙은 메서드는 어떤 작업을 작동하기 전 에 실행되고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후 에 실행되는 메서드이다. 라이프사이클은 총 세가지 ( 마운트, 업데이트, 언마운트 )로 나눈다. 01.9.1. 라이프사이클 메서드 01.9.1.1. Mounting React 컴포넌트의 인스턴스가 생성되고 DOM에 삽입되는 과정의 life cycle 입니다. constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드이다. getDerivedStateFromProps : props에 있는 값을 state에 동기화하는 메서드이다. render : 준비한 UI를 렌더링하는 메서드이다. componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드이다. 01.9.1.2. Updating prop 또는 state의 변경, 부모 컴포넌트 리렌더링, this.forceUpdate로 강제로 렌더링을 트리거할 때의 라이프 사이클입니다. getDerivedStateFromProps :     마운트 과정에서도 호출되며, props가 바뀌어서 업데이할 때도 호출된다. shouldComponentUpdate :     컴포넌트가 리렌더링을 해야할지 말아야할지 결정하는 메서드이다.(false를 리턴할 경우 아래 메서드는 호출되지 않는다) render : 컴포넌트를 리렌더링한다. getSnapshotBeforeUpdate :     컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드이다. componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드이다. 01.9.1.3. Unmou

React.js 01.7 React ref 특정 DOM 요소 에 어떤 작업을 해야 할 때 이렇게 요소에 id를 달면 css에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다.  <!-- public/index.html 파일 --> <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "utf-8" /> <link rel= "shortcut icon" href= "%PUBLIC_URL%/favicon.ico" /> <meta name= "viewport" content= "width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name= "theme-color" content= "#000000" /> <link rel= "manifest" href= "%PUBLIC_URL%/manifest.json" /> <title> React App </title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id= "root" ></div> <!-- id가 root인 div를 확인할 수 있다 --> </body> </html&g

React.js 01.6. 리액트의 이벤트 // 사용방법 /* this.setState({ 수정할 필드 이름 : 값 ,수정할 또 다른 필드 이름 : 값 }); */ render() { return ( < div > < p > 안녕하세요 . 제 이름은 { this .props.name} 입니다 . < /p> < p > 숫자 : { this .state.number} < /p> < button onClick = {() => { this .setState({ number : this .state.number + 1 }); }} > 더하기 < /button> < /div> ); } 01.5.3.4 state 값 업데이트 : setState()   게시글에서 클릭이벤트를 작성해 보았다. 사용법은 일반 HTML에서 이벤트를 작성하는 것과 비슷한데, 주의해야 할 사항이 몇 가지 있다. 01.6.1. 이벤트를 사용할 때 주의사항 01.6.1.1. 이벤트 이름은 camelCase로 작성 HTML 의 onclick 은 리액트에서 onClick 으로 작성해야 하고, onkeyup 은 onKeyUp 으로 작성해야한다. 01.6.1.2. 이벤트에 실행한 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 // HTML < button onclick = "" > // React <