1월, 2019의 게시물 표시

01.11 리액트 컴포넌트 CSS 적용 ( CSS Module, Sass, styled-components )

이미지
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

01.10 리액트 함수형 컴포넌트

이미지
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를 사용하는 컴포넌

01.9 React 컴포넌트 라이프사이클

이미지
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

01.8 리액트 컴포넌트 반복

이미지
React.js 01.8. 컴포넌트 반복 01.8.1. 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 프로세싱한 후 그 결과로 새로운 배열을 생성한다.  arr.map(callback(currentValue[, index[, array]])[, thisArg]) 파라미터 설명 callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.     - currentValue : 처리할 현재 요소.     - index (Optional) : 처리할 현재 요소의 인덱스.     - array (Optional) : map()을 호출한 배열. thisArg (Optional) : callback을 실행할 때 this로 사용되는 값. map   함수는 기존 배열로 새로운 배열을 만드는 역할을 한다.  ES6 문법의 map const nums = [ 1 , 2 , 3 , 4 , 5 ]; const result = nums.map(num => num * num); console.log(result); // [1, 4, 9, 16, 25] 01.8.2. 데이터 배열을 컴포넌트 배열로 map import React , { Component } from 'react' ; class NewComponent extends Component { render() { const arr = [ 1 , 2 , 3 , 4 , 5 ]; const arrList = arr.map( (arr) => ( < li > {arr} < /li>) ); return ( <

01.7 React ref (DOM에 이름 달기)

이미지
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

01.6 React 이벤트 핸들링

이미지
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 <