suonini

많은 양의 데이터를 렌더링 할 경우에 대한 내용 useState의 함수형 업데이트 : 함수를 사용할 때 새로운 상태를 파라미터로 넣는 대신, 상태 업데이트를 어떻게 할지 정의해 주는 것. 프로덕션 모드로 구동해서 성능테스트 할 경우 더 성능이 실제와 가깝게 나옴! useReducer를 사용 react-virtualized를 사용 장점 : 스크롤하기 전에는 보이지 않았음에도 불구하고 렌더링이 이루어지는 행위에 대해 렌더링 하지 않고 크기만 차지하게끔 하는 것. $ yarn add react-virtualized

환경설정 1. 프로젝트 생성 및 필요한 라이브러리 설치 create-react-app을 사용하여 프로젝트를 생성 $ yarn create react-app todo-app 프로젝트가 생성되면 todo-app 디렉터리로 들어가서 yarn을 사용하여 필요한 라이브러리를 설치하세요. $ cd todo-app $ yarn add node-sass classnames react-icons 2. Prettier 설정 프로젝트의 최상위 디렉터리에 .prettierrc 파일을 생성 .prettierrc { “singleQuote“: true, “semi“: true, “useTabs“: false, “tabWidth“: 2, “trailingComma“: “all“, “printWidth“: 80 } 3 index.c..

CSS 스타일링 방식 CSS작성규칙 컴포넌트 이름 - 클래스 (ex) App-header) BEM Naming : 해당 클래스가 어떤 용도로 사용되는지 명확하게 작성 (ex) .card_title-primary) CSS Selector 특정 클래스 내부에 있는 경우만 스타일 적용 .App .logo { height: 40vmin; animation: App-logo-spin infinite 20s linear; } importReact, {Component} from "react"; import './App.css'; import logo from './logo.svg'; class App extends Component { render() { return ( 4. Sass(Syntactically Aw..

React v16.8에 새로 도입된 기능. 함수형 컴포넌트에서 상태관리를 할 수 있는 useState 렌더링 직후 작업을 설정하는 useEffect importReact, { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); return( 혀재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 setValue(value - 1)}>-1 ); }; export default Counter; importReact, {useState} from "react"; const Info = () => { const [name, setName] = useState(''); const [..

Single Page Application : 한개의 페이지로 이루어진 어플리케이션 기존웹의 단점 제공하는 정보가 많기 때문에, 새로운 화면을 보여줘야할때마다 모든 뷰를 준비함에 따라 성능상의 문제가 발생할 수 있음..(트래픽 과다, 서버에 높은 부하) 캐싱과 압축을해서 속도와 트래픽 측면에서 최적화를 제공할 수 있지만, 적당하지 않은 사례도 있음. 프레임워크를 이용한 뷰 렌더링을 사용자의 브라우저가 담당. 필요한 부분만 자바스크립트를 사용하여 업데이트 다른 주소에 다른 화면을 보여주는 것을 라우팅이라함. 브라우저의 API를 사용하여 관리, 라이브러리를 사용 할 수 있음. 리액트 라우팅 라이브러리 : react-router, reach-router, Next.js 단점 앱의 규모가 커지면 자바스크립트 파..

ref : HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼, React 프로젝트 내부에서 DOM에 이름을 다는 방법(reference의 줄임말) React 컴포넌트에서는 id를 사용할 수는 있지만, 사용을 권장하지는 않음 → 컴포넌트를 여러번 사용한다면, id가 unique해지지 않기 때문이다. ⇒ ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 위의 문제가 발생하지 않고, id 뒷부분에 추가텍스트를 붙여 중복을 방지할 수 있음. ref를 사용해야 하는 상황 : DOM을 꼭 직접적으로 건드려야 할 때 React 컴포넌트에서 state 사용 ValidationSample 컴포넌트 만들기 input에 ref 달기 버튼을 누를 때마다 input에 포커스 주기 state를 사용할 ..

이벤트 종류 https://reactjs.org/docs/events.html 이벤트 핸들링 과정 컴포넌트 생성 및 불러오기 onChange 이벤트 핸들링 임의 메서드 만들기 input 여러개 다루기 onKeyPress 이벤트 핸들링하기 SyntheticEvent(합성 이벤트) : 네이티브 이벤트와 달리 이벤트가 끝나고 나면 이벤트가 초기화 되므로 정보를 참조 할 수 없음. 비동기적으로 이벤트 객체 참고시 e.target.value를 사용. 값 변경시 콘솔에 기록됨. input box를 통해 전달된 value(state message)를 확인버튼을 눌러서 alert값으로 확인시켜주고, message는 다시 ‘’로 초기화 위의 코드(렌더링과 동시에 함수를 만들어 전달)을 컴포넌트 임의 메서드를 만들어(함수..

Bundler : 파일을 묶듯이 연결, Node.js 에서 지원하는 기능으로써 require라는 구문으로 패키지를 불러올 수 있음. React 는 webpack 사용 JSX 함수를 통해 반환하는 HTML 같은 코드 function 키워드를 사용하여 컴포넌트는 만들어줌(함수형 컴포넌트) 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환 ReactDOM.render : 컴포넌트를 페이지에 렌더링하는 역할을 함. react-dom 모듈을 불러와 사용할 수 있음. const : 한번 지정하고 나면 변경이 불가능한 상수를 선언할 때 사용하는 키워드 ex) const b = 1; b = 2; ⇒ Error let : 동적인 값을 담을 수 있는 변수를 선언할 ..

1. React란, 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라 그냥 기존 View(뷰)를 날려버리고 처음부터 새로 렌더링하는 방식 애플리케이션 구조가 매우 간단하고, 작성해야할 코드양도 많이 줄어듬. 변화에 대해 신경 쓸 필요가 없고, 뷰가 어떻게 생길지 선언하며, 데이터에 변화가 있으면 기존에 있던 것은 버리고 정해진 규칙에 따라 새로 렌더링하는 것. 페이스북 개발팀이 개발함. 오직 V(View)만 신경쓰는 라이브러리 컴포넌트(component) : 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체 템폴릿보다 좀 더 복합적인 개념으로써, 재사용이 가능한 API로 수많은 기능을 내장하고 있고, 컴퓨넌트 하나에서 해당 컴퓨넌트의 생김새와 작동 방식을 정의함. ※ 템플릿 :..