그럴만두!

성능을 향상시키기 위해서 컴포넌트의 render 함수가 실행될지 안될지를 개발자가 결정할 수 있도록 하는 특수한 약속의 함수 shouldComponentUpdate 가 있다. shouldComponentUpdate(newProps, newState){ console.log('=====toc render shouldComponentUpdate' ,newProps.data, this.props.data); return false; } 이 코드는 해당 컴포넌트의 render함수 전에 작성한다. newProps.data 로는 바뀐값을 알 수 있고, this.props.data 를 통해서 현재 값을 알 수 있다는 것이다. shouldComponentUpdate 함수의 결과값이 true 면 render함수가 호출되..

클릭 시 state값을 변경하고 싶은 상황 class App extends Component { constructor(props){ super(props); this.state = { mode:'read', subject:{title:'WEB',sub:'World wide web'}, welcome:{title:'welcome', desc:'Hello,React!'}, contents:[ {id:1, title: 'HTML', desc:'html is ...'}, {id:2, title: 'css', desc:'css is ...'}, {id:3, title: 'javaScript', desc:'js is ...'} ] } } render(){ console.log('lendering'); var _ti..

컴포넌트 내부적으로 사용되는 것들이 state 이다. 리액트라는 시스템이 컴포넌트를 만들고 그 컴포넌트가 좋은 부품이 되기 위해서는 외부의 props에 따라서 컴포넌트를 실제로 구성하는 state가 철저히 분리되어있어야 한다. 사용과 구현의 분리가 확실하게 있는 상태로 양쪽의 편의성을 각자 도모하는 것이 좋은 부품을 만드는 것의 핵심이고, 리액트도 마찬가지이다. 아래 코드로 state를 공부해보자. class App extends Component { render(){ return ( ) }; } App 이라는 컴포넌트 안에 Subject라는 하위 컴포넌트가 있다. 하위 컴포넌트들의 props에 지금 하드코딩이 되어있는 것들을 state로 만들고 props로 전달해보자. 일단 먼저 constructor ..

https://ko.reactjs.org/docs/components-and-props.html Components와 Props – React A JavaScript library for building user interfaces ko.reactjs.org props를 정의하는 공식 문서 링크 “props” (props는 속성을 나타내는 데이터입니다) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트라고 정의한다. 저번에 만들었던 컴포넌트 코드 https://ojm1484.tistory.com/42 [react] 컴포넌트 만들기 src폴더 아래 App.js class Subject extends Component { render(){ return ( // 컴포넌트를 만들때..

src폴더 아래 App.js class Subject extends Component { render(){ return ( // 컴포넌트를 만들때는 최상위 태그부터 만들어야한다. WEB world wide WEB ) }; } class App extends Component { render(){ return ( ) }; } 코드 작성 후 서버를 올려보면 이렇게 화면이 출력되는 것을 확인할 수 있다. 더 추가해 보자. class TOC extends Component { render(){ return ( HTML css js ) }; } class Content extends Component { render(){ return ( html html is hyperText Markup Language. ) ..

먼저 node.js 를 설치해준다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 다운과 설치가 끝났다면 터미널을 켜서 node -v 와 npm -v 명령어를 날려보자 날렸을 때 버전이 나온다면 성공 리액트를 설치하는데에는 두 가지 방법이 있는데 npm을 통해 설치하는 방법으로 해보자. npm install create-react-app 명령어를 날려주면 다운로드가 되거나 에러가 나거나인데, 에러가 난다면 앞에 sudo를 붙여주고 다시 시도해보자. 다운로드가 되었다면 create-react-app -V 로 버전을 확인하며 설치가 잘 되었는지 확인해..

Promise? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 프로미스는 왜 필요할까? 왜냐하면 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용하는데, 일반적으로 웹 어플리케이션을 구현하 때 서버에서 데이터를 요청하고 받아오기 위한 api를 사용한다. api가 실행되면 데이터를 받아오기 위한 요청을 하는데 데이터를 받아오기도 전에 데이터를 받아온 것 처럼 화면에 데이터를 표시 하려한다면 오류가 발생한다. 이와같은 문제점을 해결하기 위해서 프로미스를 쓰는 것이다. Promise 의 상태 Pending(대기) - 비동기 처리 로직이 아직 완료되지 않은 상태 new Promise(); new Promise(function(resolve, reject){ }); Fullfilled(이행) - 비..

Vue의 생명주기에는 4가지가 있다. 1. Creation(생성) 단계 2. Mounting(장착) 단계 3. Updation(수정) 단계 4. Destrucion(소멸) 단계 https://vuejs.org/guide/essentials/lifecycle.html Lifecycle Hooks | Vue.js vuejs.org 1. Creation(생성) 단계 - beforeCreate() : 라이프사이클 중 가장 맨 처음 실행되며, 컴포넌트가 DOM에 추가되기 전이게 때문에 DOM에 접근하게되면 에러 발생 - created(): data() 변수와 events 메서드가 활성화 되어 접근할 수 있음 이 단계에서는 템플릿과 가상 DOM에는 접근할 수 없다. 2. Mounting(장착) 단계 - before..

Vuex란? 다양하고 복잡한 컴포넌트들을 효율적으로 관리하는 라이브러리 Vuex는 어플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워지기 때문에 필요하다. Flux? MVC패턴의 복잡한 데이터 흐름을 해결 할 수 있는 새로 나온 패턴으로 데이터의 흐름이 여러개로 갈리지 않고, 단방향으로만 처리된다. Vuex 설치 및 등록하기 npm i vuex@3.6.2 npm 방식으로 설치를 해준다. https://vuex.vuejs.org/installation.html Installation | Vuex Installation Direct Download / CDN https://unpkg.com/vuex@4 Unpkg.com provides NPM-based CDN links. The ..

Enum 이란? : 특정 값들의 집합을 의미하는 자료형. 집합의 데이터 타입. 숫자형 이넘과 문자형 이넘으로 구분된다. enum Shoes{ Nike = '나이키', Adidas = '아디다스' } // 별도의 값을 지정하지 않으면 숫자형 이넘으로 된다. 지정하지 않으면 0부터 시작 var myShoes = Shoes.Nike; 이넘으로 정의 된 애들은 별도의 값을 지정하지 않으면, 첫번째 값은 0으로 할당되고 다음부터는 1씩 증가하는 값을 가진다. (숫자형 이넘) 알아볼 수 없으니 TypeScript Playground에서 돌려보자 콘솔에 찍히는 걸 볼 수 있다. 예제를 한번 보자 이넘으로 Yes와 No를 지정해준다면 함수활용에 있어서 의미는 같지만 값이 다른 애들을 걸러줄 수 있다.