프로그래밍 공부 노트

https://twitter.com/dan_abramov/status/981712092611989509 리엑트 컴포넌트를 다룰 때 사용할 수 있는 API들이다.  constructor 컴포넌트 생성자 함수이다. 컴포넌트가 만들어질때마다 이 함수가 호출된다. ex) constructor(props){ super(props) } 컴포넌트가 처음 브라우저 상에 나타나게 될 때 만들어지는 과정에서 가장 먼저 실행되는 함수이다. 컴포넌트가 가지고 있을 state의 초기설정을 하거나 컴포넌트가 생성되는 과정에서 미리 해야할 작업을 constructor에서 처리한다. render 컴포넌트에 전달되는 데이터의 변경이 발생하거나 setState를 통한 state의 값이 변경될경우 매번 render메서드가 호출되어 새로운 데이터를 반영하여 화면을 렌더링해준다. getDerivedStateFromProps 전달되는 props의 값이 변경될때 state의 값과 동기화 시켜준다. 부모 컴포넌트에서 전달해주는 props가 변경 됐을 경우 호출되며, render 메서드가 호출되기 이전에 호출된다. getDerivedStateFromProps(nextProps, preState) 메서드는 static 키워드를 붙여서 인스턴스 메서드로 선언해야한다. 첫번째 인자 nextProps는 부모 컴포넌트로부터 전달받은 객체이며 두번째 인자 preState는 렌더링되기 이전의 state 객체이다. 메서드를 선언하고 따로 return 하지 않을 경우 에러가 발생한다. return하는 데이터는 객체여야한다. render메서드가 호출되기 전이므로 변경된 props 데이터를 state에 반영하는 작업을 처리하면 된다. shouldComponentUpdate virtual dom에 리렌더링할지 말지 결정해주는 역할을 한다. 전달되는 값이 변경이 되었는지 안되었는지 확인해서 변경 되었을 경우만 컴포넌트를 다시 렌더링 하도록 하며 값이 변경되지 않았다면 컴포넌트...

PropTypes를 이용한 타입, 유효성, 에러 체크 앱이 커짐에 따라 타입체킹을 통해 많은 버그를 잡을 수 있다. Flow나 TypeScript를 통해 체킹도 가능하지만 React에서 빌트인 타입 체킹이 가능하다. 컴포넌트의 props에서 타입을 체크하고 싶다면 특별한  propTypes 속성을 할당할 수 있다. propTypes는 받은 데이터가 유효한지 확인하는데 사용할 수 있는 유효성 검사기를 내보낸다.  import PropTypes from 'prop-types'; class Greeting extends React.Component { render() { return ( Hello, {this.props.name} ); } } Greeting.propTypes = { name: PropTypes.string }; 위 예제는 컴포넌트명.propTypes = { 키: value } 에서 value값이 string인지 체크하며 prop에 유효하지않은 값이 전달되면 콘솔에 경고가 노출된다. 성능상의 이유로 propTypes는 개발 모드에서만 체크한다. 그리고 PropTypes.string 유효성 검사 뒤에 isRequired가 있고 없을때 차이점이 발생하는데 isRequired가 있다면 반드시 값을 가지고있어야하며 isRequired는 값을 지정하지 않아도 된다. PropTypes의 종류 kind description array 배열 bool true/false func 함수 number 숫자 object 객체 string 문자열 symbol 심벌 개체(ES6) node 렌더링 가능한 모든것(number, string, element, 또는 그것들이 포함된 array/fragment) element React element instanceOf(ClassName) JS에서 instanceof로 정의 가능한 클래스 인스턴스 oneOf([…Value]) 포...

리액트의 class 컴포넌트에서 다루는 데이터는 두개로 나뉜다.  props와 state이다. 모든 언어에서는 재활용성과 중복의 제거를 중요시한다고 배웠다.  이러한 재활용성과 중복의 제거를 토대로 코드의 재활용성을 높이기위해서 사용된것이 props이다.  props 작성된 컴포넌트에 props를 통해 부모컴포넌트에서 자식컴포넌트로 값을 전달하면 내가 원하는 값이 자식 컴포넌트에서 작성한 템플릿에 값을 넣어 반환한다. props는 html코드에서 attribute(속성)과 비슷한 형태로 작성되고 이렇게 작성된 props로 전달되는 값을 자식 컴포넌트에서 {this.props.속성명}으로 부모컴포넌트에서 전달한 props 값을 전달 받아 출력한다. 아래의 예제를 보면  App.js 는 부모컴포넌트 Introduce.js 는 자식 컴포넌트 App.js import React , { Component } from 'react' ; import Introduce from './Introduce' ; export default class App extends Component { render () { return ( < div > < Introduce name = '리액트' age = '100' />< br /> < Introduce name = '자바스크립트' age = '200' gender = '중성' />< br /> < Introduce name = 'CSS' age = '300' gender = '남자' />< br /> < Introduce name = '컴포넌트' age = '...

JSX는 자바스크립트 확장문법이다. 1. JSX를 사용하는 스크립트 파일은 상단에서 React를 꼭 불러와야 한다. 2. 태그는 꼭 닫혀있어야 한다. <div> 태그를 열었으면 </div>를 사용하여 태그를 꼭 닫아주어야 한다. html에서 <br>태그를 작성 할 때 처럼 태그를 안닫으면 리액트에서는 오류가 발생한다. 3. 최상위 태그는 꼭 1개여야 한다. 작성된 태그들 전부를 하나로 묶는 최상위 태그가 존재해야한다. 다르게 말하면 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 한다.  가장 간단한방법으로 태그 전체를 <div></div> 태그 안에 넣어 감싸는 것이고 스타일관련 설정을 할 때 혹은 table관련 태그를 작성하면서 문제가 발생될 수 있기 때문에 <Fragment></Fragment> 태그를 이용하여 태그들을 감싼다. Fragment가 에러가 뜰 경우 <React.Fragment></React.Fragment>를 사용하자!   React.Fragment의 단축문법으로 <> </> 공백태그가 있다. 공백태그로 감싸도 된다! 4. JSX 내부에서 조건부 렌더링을 할 때는 보통 삼항 연산자를 사용하거나, 논리 연산자를 사용한다.  반면에 if 조건문을 사용할 수는 없다. 만약에 if 조건문을 사용하려면 IIFE(즉시실행함수표현)을 사용해야한다.  switch문을 사용하는것은 무관한다. 5. 리액트 컴포넌트에서는 class 대신에 className을 사용한다. 또한 css style 속성을 사용할때는 style='color: red; padding: 20px'등과 같이 작성하지 않고 객체를 사용하여 해당속성을 지정한다.   JSX 문법은 중괄호 표기법을 사용하여 값을 출력할 수 있다. #선언시 const style = { backg...

async / await 을 사용하면 프로미스(Promise)를 좀 더 편리하게 사용할 수 있다. async / await 는 프로미스(Promise) 코드를 보다 간편하고 직관적으로 작성할 수 있게 해주는 API 이다.   async 함수 function 앞에 async 키워드를 작성하면 해당 함수는 프로미스(Promise)가 된다. const asynchronous = async () => { return "something" ; }; 기존의 프로미스 방식에서는 resolve 콜백함수와 reject 콜백함수를 인자로 받아오는 콜백함수를 선언했어야 했다. 하지만 async 키워드를 작성하면 프로미스(Promise)의 콜백함수를 작성하지않아도 해당 함수는 항상 프로미스를 반환하게 된다.  만약 프로미스가 아닌 값을 반환하더라도 이행된 상태의 프로미스로 값을 감싸 이행된 프로미스를 반환해야한다. const asynchronous = async () => { return "something" ; }; asynchronous (). then ( console . log ); // something 위 예시 asynchronous 함수를 호출하면 아래의 사진과 같이 이행된 프로미스 "something"이 반환된다. 이 처럼 함수 앞에 async 키워드가 작성되면 이행된(fulfilled) 프로미스가 반환된다. async 키워드를 사용하면 기존의 .then() 대신에 await을 사용할 수 있다. await await은 영어 단어 뜻 "기다리다" 와 동일하게 동작한다.즉 프로미스가 처리될 때까지 함수 실행을 기다리게 된다. 그리고 처리된 결과를 가지고 코드를 이어서 실행한다. 프로미스가 처리되는 동안에 다른 업무(다른 스크립트 실행, 이벤트 처리 등)을 할 수 있다. await은 async 함수 안에서만 동작한다. async 키워드를 사용하지 않은 함수에서 aw...

NPM 명령어 npm 이란 노드 패키지 매니저 (Node Package Manager)를 의미한다. npm은 자바스크립트 런타임 환경인 Node.js 의 기본 패키지 관리자 역할을 한다.  그래서 npm을 통해 패키지 (package) 또는 모듈 (module) 이라고 불리는 자바스크립트 라이브러리를 자신의 프로젝트에 설치할 수 있다. 또한 npm을 통해 자신의 프로젝트에서 사용 중인 패키지들의 버전 업데이트도 관리할 수 있다. #설치 npm init : 패지키(외부모듈) 설치 환경과 package.json을 만드는 초기화 명령어이다. 새로운 프로젝트나 패키지를 만들 때 사용한다. npm init 명령어 실행 후 npm install 패키지명 으로 설치되는 패키지(모듈)들은 package.json 파일의 dependencies부분에 명시된다.  다른 환경에서 동일한 라이브러리를 설치하고자 할때 해당 프로젝트로 다운받고 npm install 명령어를 작성하여 실행하면 package.json 파일의 dependencies 부분에 명시되어있던 패키지들이 모두 다운되어 동일한 개발환경을 구성할 수 있다. 설치된 라이브러리들은 node_module 폴더내에서 관리된다. npm install 패키지명 :   해당 프로젝트에서 사용할 자바스크립트 라이브러리를 해당 프로젝트에 설치한다. npm install 패키지명 -g : 시스템 레벨에서 사용할 라이브러리를 설치할 때 사용한다. -g 로 설치된 패키지는 다른 모든 프로젝트에서 해당 패키지를 사용할 수 있도록 설치된다. npm install 패키지@버전 : 특정한 버전의 패키지를 설치할 수 있다. 패키지 설치시에 옵션을 줄 수 있는데 뒤에 --save 또는 -S를 하면 npm init 명령어로 생성되었던 package.json 파일의 dependencies에 추가된다. (npm5부터는 --save옵션이 기본적으로 설정되어 있기 때문에 안 붙여도 된다) dependencies...

1. call, apply call 메소드는 객체에 함수를 상속시킬 수 있다. 즉 함수안에 this가 가리키는 객체를 지정해주는 메소드이다. 이러한 call 메소드와 apply메소드는 비슷하다.  call메소드는 .call(참조할 객체명,인자,인자, ...) 로 지정하는 반면에 apply메소드는 .apply(참조할 객체명,[인자, 인자, ...]) 형식으로 작성한다.  즉, 함수를 호출할 때 매개변수로 전달할 값들을 하나하나 전달할지, 배열로 묶어서 전달할지 차이이다. const kim = { name : "kim" , first : 10 , second : 20 }; const lee = { name : "lee" , first : 10 , second : 10 }; function sum ( arg1 , arg2 ) { return arg1 + ( this . first + this . second ) + arg2 ; } console . log ( sum . call ( kim , "점수합계는 " , "점 입니다." )); // 점수합계는 30점 입니다. console . log ( sum . apply ( lee , [ "점수합계는 " , "점 입니다." ])); // 점수합계는 20점 입니다. 일반적으로 객체안에 함수가 들어가있으면 해당 함수안에있는 this는 해당함수를 포함하고있는 객체를 가리키지만 위와같이 분리되어 함수를 정의할 경우 this가 가리키는 객체는 window 객체이다.  call과 apply를 사용하기 전에 sum함수안에 this는 window를 가리킨다. 이때 call, apply를 사용하면 this가 가르키는 대상을 위에서처럼 변경할 수 있다. 2. bind bind 메소드는 함수안의 this가 가리키는 객체를 영구적으로 고정시키는 역할을 하며 새로운 함수를 만들어내는 메소드이다. co...

this란 this를 포함하고 있는 함수 또는 메서드가 자신을 포함하고 있는 객체를 가리키도록 약속된 특수한 예약어다. 간단히 말하면 this는 자신을 호출하는것을 가리킨다. this를 위에서 처럼 정의했지만 상황에 따라 조금씩 다르게 동작한다. this는 일반 함수에서 사용할 때와 화살표 함수에서 사용할 때 다르게 동작한다. 일반 함수에서의 this는 호출할때의 환경에 따라 즉, 런타임 환경에서 this의 값이 동적으로 결정되는것이고 화살표함수에서의 this는 선언된 시점에서의 환경(lexical scoping)에 따라 정적으로 결정되는 것이다. 조금더 자세히 알아보면 상황에 따라 다르게 동작하는 this 1. 함수(메서드) 안에서의 this // 함수 안에서의 this function functionThis () { console . log ( this ); } functionThis (); // window (전역)함수를 선언하면 this는 window 객체를 가리킨다.  함수가 전역에 선언되어있으면 해당 함수는 전역 객체인 Window 안에서 함수가 선언되는 것이기 때문에 함수이면서 동시에 메서드이다.  위 함수(메서드)가 호출되면 함수 안에있는 console.log(this)는 해당 함수를 소유하고있는 객체인 window를 가리킨다는것을 알 수 있다. 여기서 메서드란 객체가 가지고 있는 함수를 말한다. // 메서드 안에서의 this let methodThis = { test : true , methodTest : function () { console . log ( this . test ); // true }, // methodTest() { // console.log(this.test); 위의 메서드를 이와 같이 줄여서 작성할 수 있다. // }, }; 위와 같이 객체안에 메서드를 작성한 경우 메서드를 소유하고 있는 객체인 methidThis는 this가 가리키는 대상이 된다. 2...