Hooks : 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 하게 해 줌 - useState : 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줌 - useEffect : 리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 수행하도록 설정할 수 있게 해줌 -> componentDidMount + componentDidUpdate - useConext : 함수형 컴포넌트에서 Context를 보다 쉽게 사용 가능 - useReducer : useState보다 컴포넌트에서 더 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트 할 때 사용 - useMemo : 함수형 컴포넌트 내부에서 발행하는 연산을 최적화 할 수 있게 해줌 - useCallback : 이벤트 핸들러 함수를 필요할 때만..
Snapshot Docs Jest · 🃏 Delightful JavaScript Testing 🃏 Delightful JavaScript Testing jestjs.io Snapshot Test : UI가 의도치 않게 변하는것을 막기위해 사용할 때 유용함 - 두개의 snapshot을 비교를 하는데, 맞지 않으면 Fail이 뜨기 때문에 의도치 않은 변경이 일어나는 것을 방지함 React에서의 활용 - 전체 App을 구성하는 UI를 랜더링 하는 대신, 테스트 랜더링을 통해 React tree에 대한 일련의 값들을 빨리 생성 가능 - react-test.js import React from 'react'; import Link from '../Link.react'; import renderer from 're..
Router (경로기) 설치 npm install react-router-dom npm install query-string BrowserRouter : 라우터 장비로 사용하겠다고 선언 - 'App를 라우터로 사용한다' import React, { Component } from 'react'; import { BrowserRouter } from 'react-router-dom'; class Root extends Component { render() { return ( ); } }; const App = () => { return ( 안녕 난 App야 ); }; export default Root; Route : 경로 매핑 - exact : 정확하게 주소가 매칭이 될 때 컴포넌트를 가져오게 함 - :p..
Component Component 파일 안에서 선언한 다른 Component를 import / export - class 앞에 export 키워드 작성 - Bpp.js 안에 Cpp.js, Dpp.js 선언 import React, { Component } from 'react'; class Bpp extends Component { render() { return ( Bpp ); } } // 다른 파일에서 Bpp안에 있는 Cpp를 사용하고 싶을 때, 앞에 export 작성 // 아니면 'Cpp' is not exported from './components/bpp.js' 오류 뜸 export class Cpp extends Component { render() { return ( Cpp ); } } e..
컴포넌트 스타일링 방법 1. CSS Module : CSS를 모듈화하여 사용하는 방식 - 고유한 클래스네임을 생성하여 스코프를 지역적으로 제안하는 방식 - classnames 라이브러리를 사용하면 더욱 편지 지정 가능 classNames - 설치 yarn add classnames - bind 기능 : 클래스네임을 입력할 때 styles. 생략 가능 import React from 'react'; import classNames from 'classnames/bind'; import styles from './App.css'; const cx = classNames.bind(styles); function App() { return ( ); } export default App; 2. Sass (Synt..
함수형 컴포넌트 class 문법 사용 - 컴포넌트에서 라이프사이클 API나 state를 사용할 때 사용하는 형식 import React, {Component} from 'react'; class Hello extends Component { state = { name: "Hello" } render(){ return( Hello {this.props.name} ); } } export default Hello; 함수형 컴포넌트 - 오로지 props를 전달받아 뷰를 랜더링하는 역할만 수행 mport React from 'react'; function Hello(props){ return( Hello {props.name} ) } export default Hello; - ES6의 화살표 함수와 비구조화 할..
Life Cycle - 컴포넌트 상태에 변화가 있을 때 마다 실행하는 메소드 - Third Party 라이브러리를 사용하거나, DOM을 직접 건드려야 하는 상황에서 유용 1. 마운트 : DOM이 생성되고 웹 브라우저상에 나타내는 것 constructor 메소드 - 컴포넌트의 생성자 메소드로 컴포넌트를 만들 대 처음으로 실행 - 초기 state 정의 getDerivedStateFromProps( ) - props에 있는 값을 state에 동기화하는 메소드 - 컴포넌트를 마운트하거나 props를 변경할 때 호출 render( ) 함수 - 컴포넌트 모양새 정의 - this.props와 this.state에 접근 가능 - 리액트 요소 반환 (아무것도 보여주지 않고싶으면 null값이나 false값 반환) - 절대..
ref (reference) : DOM에 이름을 다는 방법 - DOM을 직접 건드려야 할 때 사용 사용 방법 1. props를 설정하듯이 DOM에 ref 속성 추가 2. ref 값으로는 콜백 함수 전달 - 콜백 함수 : ref를 파라미터로 가짐 {this.input=ref}}> DOM을 꼭 사용해야 하는 상황 - 어쩔 수 없이 DOM에 직접적으로 접근해야함 -> ref 사용 1. 특정 input에 포커스(커서) 주기 import React, {Component} from 'react'; import './ValidationSample.css'; class ValidationSample extends Component{ state = { password : '', clicked : false, valida..
state : 컴포넌트 내부에서 읽고, 업데이트 가능 - 언제나 기본 값을 미리 설정해야 사용 가능 -> 초기화 - 객체 형식으로 생성 및 갱신 - 값 갱신 가능 -> setState( ) 함수 사용 constructor( ) : state 초기값을 내부에서 설정할 떄 사용 - MyComponent.js import React, { Component } from 'react'; import PropTypes from 'prop-types'; class MyComponent extends Component { constructor(props){ super(props); this.state = { number : 0 //state에 number값을 0으로 설정 } } render() { return ( 숫자..
props (properties) : 컴포넌트 속성을 설정할 때 사용 - 부모 컴포넌트가 자식 컴포넌트에 주는 값 - 값을 받아오기만 할 뿐, 수정 불가 - MyComponent.js import React, {Component} from 'react'; class MyComponent extends Component { render(){ return ( 안녕하세요 제 이름은 {this.props.name} 입니다. ) } } export default MyComponent; - App.js import React, { Component } from 'react'; import MyComponent from './MyComponent'; class App extends Component { render(..
JSX : 자바스크립트 확장 문법 1 2 3 4 5 6 7 8 9 10 11 12 13 import React, { Component } from 'react'; class App extends Component { render() { return ( ); } } export default App; cs - 위와 같이 작성한 코드는 babel-loader를 사용하여 자바스크립트로 변환함 장점 - 보기 쉽고 익숙함 -> HTML 코드와 비슷함 기본 문법 1. 컴포넌트에 여러 요소가 있다면, 무조건 부모 요소 하나로 감싸야 함 1 2 3 4 5 6 7 8 9 10 11 12 13 14 class App extends Component { render() { return ( Hello React! Welcom..
Redux - 상태 관리의 로직을 컴포넌트 밖에서 처리 - 목표 : 플럭스를 기반으로 애플리케이션 안에서 변경된 데이터가 어떻게 흘러가는지 더 명확히 표현하도록 해줌 - 디스패처를 없애고 애플리케이션 상태를 불변 객체 하나로 표현함으로써 플럭스의 개념을 더 단순화함 - 모든 상태 데이터를 한 객체에 모으게 함으로써 애플리케이션에서 상태를 보는 관점을 단순하게 유지 ARS 순서로 실행 Action : 객체 형태로 되어 있고, 상태를 변화시킬 때 참조하여 변화를 일으킴 - 상태를 바꿀 때는 객체 전체를 바꿔치기 하는 방식을 사용하는데, 바꿀 대상을 지정해줌 - 애플리케이션 상태 중에서 어떤 부분을 바꿀지 지시하고 그런 변경에 필요한 데이터 제공 - event가 하는 일이랑 똑같다고 봐도 됨 ex) 버튼에서 ..
React : 사용자 인터페이스를 개발하기 위한 자바스크립트 라이브러리 - 컴포넌트 기반 #컴포넌트 : 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여줌 - DOM 관리와 상태값 업데이트 관리를 최소한으로 하고, 오직 기능 개발과 사용자 인터페이스 개발에 집중할 수 있도록 도와줌 1. node.js 설치 2. CRA(Create React App) 설치 1 npm install -g create-react-app cs 3. 파일 경로 설정 후, App 생성 1 create-react-app 앱 이름 cs 4. 서버 돌리기 1 npm start cs 위의 사진처럼 http://localhost:3000/ 이 뜨면 성공!