Gray CHA

컴포넌트 컴포넌트는 프로그래밍적인 의미로 재사용 가능한 각각의 독립된 모듈을 말한다. 즉, 효율적인 협업과 생산성을 높이는 성능 최적화 시스템 구현을 가능하게 한다. 명명규칙 컴포넌트명은 항상 대문자로 시작해야 하고, props(속성) 임의 값을 전달받아 화면에 표시하는 React element를 반환한다. 컴포넌트 선언 1. 클래스형 컴포넌트 state / 생명주기 활용 가하고, render() 함수를 반드시 선언해야 한다. import React, { Component } from 'react'; class App extends Component { render() { return ( ); } } export default App; 2. 함수형 컴포넌트 state / 생명주기 활용 불가능했지만, Ho..

React Developer Tools 크롬 확장 프로그램 크롬 확장 프로그램을 통해 React 작업 시, 개발자 도구를 통해 효율적인 작업을 처리할 수 있습니다. 관련 프로그램 크롬 React Developer Tools [바로가기] 을 설치합니다. React Developer Tools 구동 F12 키를 눌러 개발자 도구툴에서 'Componets'와 'Profiler' 를 확인합니다. 조금 더 쾌적하게 작업 하실 수 있습니다 :D

현재 버전 확인 # node -v v10.24.0 npm 캐쉬 삭제 # npm cache clean -f npm WARN using --force I sure hope you know what you are doing. node 버전을 관리하는 n 모듈 설치 # npm install -g n /usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n + n@7.3.1 updated 1 package in 2.018s n 모듈을 통해 최신 버전 설치 # n latest installed : v16.8.0 (with npm 7.21.0) 업데이트 후에도 버전이 그대로일 경우, 링크를 재 설정해주자 # ln -sf /usr/local/n/versions/node/16...

모든 컴포넌트는 생명주기 메서드를 가지며, 크게 마운트(mount) / 업데이트(update) / 언마운트(unmount) 의 개념으로 구분됩니다. 아래 생명주기 도표를 참고하면서, 생명주기 메서드에 대해서 알아보겠습니다. render( ) 클래스 컴포넌트 생성 시, 필수로 생성해야 하는 메서드로 호출될때마다 동일한 결과를 반환해야 하며, 브라우저와 직접적인 상호작용을 하지 않습니다. constructor( ) 생성자로 컴포넌트 생성시 처음 실행됩니다. 단, 바인딩, state 초기화 작업이 없다면, 생성하지 않아도 됩니다. ( * 메서드 생성 시, super(props)를 반드시 정의 해줘야 합니다.) getDerivedStateFromProps( ) 컴포넌트를 마운트할 때와 업데이트 할때 render..

== Equal Operator / 변수값(value)을 기준으로 비교연산 한다. console.log(1=="1"); // true console.log(0=="0"); // true console.log(1==true); // true console.log(0==false); // true console.log(null==undefined);// true === Strict Equal Operator / 변수값(Value)과 자료형(Type)을 기준으로 비교연산 한다. console.log(1==="1"); // false console.log(0==="0"); // false console.log(1===true); // false console.log(0===false); // false cons..

비구조화 할당 배열 안에 있는 값을 쉽고 간결하게 사용할 수 있는 문법 구조입니다. 기존 방식 보다 선언이 쉬우며, 가독성이 높습니다. // 기존 배열 문법 구조 const array = ['a', 'b', 'c']; const one = array[0]; const two = array[1]; const three = array[2]; console.log(one);// a console.log(two);// b console.log(three);// c // 비구조화 문법 구조 const array = ['a', 'b', 'c']; const [one, two, three] = array; console.log(one);// a console.log(two);// b console.log(three)..

Reactjs code snippets VS Code를 사용 중이라면, Reactjs code snippets 확장 프로그램을 통해 , 컴포넌트 생성을 쉽게 할 수 있다. rsc : 함수형 컴포넌트 코드 생성 설치 후, Component 파일 생성하여 에디터에 'rsc(함수형 컴포넌트)'를 입력한다. Component 파일명에 맞는 컴포넌트 코드가 자동으로 생성되는걸 확인할 수 있다. rcc : 클래스형 컴포넌트 코드 생성 설치 후, Component 파일 생성하여 에디터에 'rcc(함수형 컴포넌트)'를 입력한다. Component 파일명에 맞는 컴포넌트 코드가 자동으로 생성되는걸 확인할 수 있다.