KBennyCC

글

1월, 2019의 게시물 표시

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

- 1월 31, 2019

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, ...

자세한 내용 보기

01.10 리액트 함수형 컴포넌트

- 1월 31, 2019

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 컴포넌트 라이프사이클

- 1월 31, 2019

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.8 리액트 컴포넌트 반복

- 1월 31, 2019

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>) )...

자세한 내용 보기

01.7 React ref (DOM에 이름 달기)

- 1월 30, 2019

React.js 01.7 React ref 특정 DOM 요소 에 어떤 작업을 해야 할 때 이렇게 요소에 id를 달면 css에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다.  <!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>  </body> </html...

자세한 내용 보기

01.6 React 이벤트 핸들링

- 1월 30, 2019

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 < ...

자세한 내용 보기