IT개발 정보 정리

• webpack

1. 코드들을 의존하는 순서대로 하나 또는 여러개의 파일로 만들어줌
2. gulp 와 비슷. 더 좋다

3. 여러개의 자바스크립트 파일을 하나도 만들어 주거나 규칙에 따라 분리할 수도 있다.
4. ES6 - 모던 자바스크립트 사용할 때 구형브라우저에서 지원이 안되서 바벨을 이용해 변환하여 여러종류의 브라우저에서 실행 하능
5. 프로젝트를 만들 때 전체적으로 파일들을 관리해 주는 도구

• babel

1. 자바스크립트 변환 도구
2. 노드나 자브스크립트 엔진에서 모든 문법을 지원해 주지는 않음
3. 리액트는 JSX 문법을 사용해 컴포넌트를 작성하는데 이때 바벨을 사용함

• JSX : HTML 처럼 생긴 문법이 자바스크립트 코드로 변환됨

1. 태그는 반드시 받혀야 한다
2. 최상위 element는 꼭 하나여야 한다. (태그가 2개 이상일 경우 최상위에 하나의 태그로 감싸줘야함)
   이 경우 불필요한 최상위 element가 하나 생기게 되는데 React 16.2 이상에서 fragment 기능으로 방지할 수있다.
3. JSX 안에서 자바스크립트 값을 사용할 때는 {변수명} 으로 사용한다
4. var 변수는 scope 가 함수 단위이다.

5. const, let 변수는 scope 가 블록 단위이다.

6. ES6 에서 var 은 더이상 쓰지 않음
   고정 상수는 const, 일반 변수는 let 사용
7. JSX 내부에서 조건식 사용하기
   1)  삼항 연산자 사용 ( 조건 ? true : false )
   2)  && 연산자 사용
   3)  function 함수 작성 ( => 화살표 함수로도 사용 가능. 화살표 함수는 this, argument super 가 없는 함수임)
8. 
   

1. Style 을 객체 형태로 넣어줌
2. 속성은 기존 단어가 아닌 특수문자를 제외하고 camel case 로 적는다.
3. class 는 className 으로 입력해야 한다.

4. JSX 내부에서 주석은 그냥 출력되어 버린다.
   일반 주석 및 멀티라인 주석 모두 출력됨.
   일반적으로 주석은 멀티라인으로 작성하고 {} 로 감싸준다

• Props : 부모에서 자식으로 일방적으로 전달. 자식에서 값을 변경할 수 없다.(읽기 전용)

1. <Child value = "value">    : value 가 props 이다
2. default props 값을 class 내부에 static 으로 지정해 놓을 수 있다
   class 외부에 설정할 수 있지만 static 으로 사용하는게 최신 자바스크립트 문법에 더 알맞다.

• 단순히 불러오기만 할 class 일 경우 함수형 component 로 만든다

• 함수형 컴포넌트와 클래스형 컴포넌트의 차이점 (함수형 컴포넌트 기준)

1. state 기능이 없음
2. life cycle 없음

1. 초기 마운트 속도가 미세하게 빠르다
2. 불필요한 기능이 없어서 메모리 자원을 덜 사용한다

* state : 컴포넌트 스스로가 가지고 있는 객체. 따라서 컴포넌트 스스로가 값을 변경 할 수 있다. (setState 사용)

- 카운터 하는 소스 작성... ( 카운터에 나오는 숫자는 유동적. 숫자가 바뀔때 마다 rerender 해줘야 한다. )

* 아래는 전부 class 안에 정의한다.

1) state 정의 : 객체여야 한다. 문자열, 숫자 안됨.

2) 객체 안에 요소를 정의 한다.

3) 카운터 값을 변경하기 위해 custom method 를 만든다.

4) 카운터 기능을 위해 증가 감소 함수를 만드는데, 함수 안에서 state 값을 직접 조절하면 안된다.

    컴포넌트에서 state 값이 update 된지 모른다.

5) state 값이 변경되는걸 component 가 알기 위해서는 항상 setState 함수를 통해 변경해줘야 한다.

- 잘못된 state 사용방법

- 올바른 사용방법

* render 함수는 그냥 함수로 작성했는데 increase, decrease 함수는 왜 화살표 함수( => )로 작성했을까?

  : 증감 함수를 화살표가 아닌 기본 함수로 작성하게 되면 함수 안에서 this 가 어느것을 가리키는지 모르게 된다.

  : 해당 문제를 해결해주기 위해서는 constructor 를 이용해야 한다.

    1) counter component 가 생성될 때 항상 constructor 가 제일 먼저 실행되고,

    2) constructor 에서는 상속받은 Component 의 기본 생성함수를 먼저 호출해주도록 한다. ( super 사용 )

    3) 그 다음 counter component 에서 사용되는 increase, decrease 함수의 this 가 constructor 의 this 라는걸 명시해 준다. ( binding 해줌 )

- 예시

* props 는 부모자 자식에게 넘겨주는 변경 불가능한 값

* state 는 자기 자신이 가지고 있는 변경 가능한 값

* life cycle api 사용 시기

 1) component 가 브라우저에 나타날 때

 2) component 가 브라우저에서 업데이트 될 때

 3) component 가 브라우저에서 사라질 때

* 종류 (매우 많다)

1. Mount - Component 가 브러우저에 나타남

  1) constructor : Component 가 만들어질 때 가장 먼저 실행되는 함수

  2) getDerivedStateFromProps : props 로 받은 값을 그대로 state 에 동기화 시키고 싶을 때 사용 (mount, update 두 부분에서 사용)

  3) render : DOM, 태그 등등 정의

 * 이후 브라우저에 표시되고 난 다음

  4) componentDidMount : 외부 라이브러리, 차트 라이브러리 등등 사용할 때, ajax, api 요청을 할 때 이곳에서 실행

                                    뷰가 다 그려지고 스크롤을 이동, 이벤트 listening

2. Update - Component 에서 props, state 값이 변경됨

  1) getDerivedStateFromProps : props 로 받은 값을 그대로 state 에 동기화 시키고 싶을 때 사용 (mount, update 두 부분에서 사용)

  2) shouldComponentUpdate : (중요) component 가 update 되는 성능을 최적화 시킬 때 사용

   - 부모 component 가 rerender 되면 자동적으로 자식 component 도 rerender 된다. 하지만 불필요할 때가 있다.

   - react 는 virtual DOM 을 사용하지만 기본적으로는 rerender가 발생하면 기본 DOM 과 virtual DOM 둘 다 다시 그린 후 변경점을 비교하게 된다

   - 이 기능을 사용하게 되면 virtual DOM 에 그리는 것조차 막아서 뷰의 변경을 방지 할 수 있다. (성능 최적화 관점)

   - 해당 함수는 true, false 값을 반환하며, true 는 render 실행, false 는 실행 안함

 * render 가 실행되고 브라우저에 반영되기 바로 직전

  3) getSnapshotBeforeUpdate : render 되고 브라우저에 표시되기 전에 이 함수에서 특정 로직을 수행한다.

   - 스크롤 위치, DOM 크기 가져오기 등등

 * 위 작업들을 모두 마치고 component 가 모두 update 되고난 후

  4) componentDidUpdate : state 가 변경되었을 때 이전 상태와 현재 상태를 비교해서 특정 작업을 해야할 때

3. Unmount - Component 가 브러우저에서 사라짐

  1) componentWillUnmount : 마운트 때 listen 시킨 이벤트들을 해제할 때 사용됨

4. componentWillReceiveProps

 - 16.3 부터 사라짐

5. getDerivedStateFromProps

 - 16.3 부터 사용 가능

 - setstate 사용 불가.

 - 변경 할 state 값을 바로 return 해주면 setState 사용하지 않고도 state 에 값이 적용된다.

 - state 와 props 값의 동기화

[StateComponent.js]

[App.js]

6. shouldComponentUpdate

 - 다음 받아올 props, state 값을 가져옴

 - return 값에 따라 값의 업데이트 여부가 결정됨 ( true : 업데이트 , false : 안함 )

 - 특정 조건에서 update 를 막아줄 수 있는 함수

7. componentWillUpdate

 - 사용하지 않음

8. getSnapshotBeforeUpdate

 - update 되기 바로 직전 DOM 상태를 return

 - 직전 상태 (스크롤 위치 등) 를 componentDidUpdate 를 통해서 유지 시킬 수 있다.

9. componentDidUpdate

 - getSnapshotBeforeUpdate 에서 획득한 이전 상태를 3번째 파라미터로 받아 작업 진행

10. componentWillUnmount

 - component 가 사라질 때 호출됨

* sample : count 가 10이 넘어가면 StateComponent 를 더이상 표시하지 않게되고

              StateComponent 가 사라지면 StateComponent 클래스에 구현된 componentWillUnmount 에 의해 특정 로직이 수행됨

[App.js]

11. componentDidCatch

 - component 에서 에러가 발생했을 때 확인할 수 있음

 - render 함수 안에서 에러가 나면 app 자체가 crash 발생함

 - 에러를 캐치하기 위해서는 자식 component 에서는 불가능하고 부모 component 에서만 가능하다

1. 설치 확인

 - Node.js 버전 확인 :  $ node -v

 - yarn 버전 확인 :  $ yarn -v

2. create-react-app 설치 : https://github.com/facebook/create-react-app

 - 페이스북에서 만든 react 프로젝트를 통합 설치해주는 툴

 - webpack, babel 설치 및 설정을 간소화 시켜줌

설치

$ npm install -g create-react-app

$ create-react-app hello-react

or

$ npx create-react-app my-app

* 프로젝트가 생성되면 개발을 시작해보자!

14번

[배열에 데이터 삽입하기]

(참고)

…  spread 전개 연산자 문법 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator

Object.assign 함수 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

* 자식 컴포넌트에서 부모 컴포넌트로 값 전달하기

1. 부모 컴포넌트에서 handleCreate 라는 메소드를 만들고 자식 컴포넌트로 props 로 전달한다.

2. 자식 컴포넌트에서 props 로 전달받은 handleCreate 메소드를 호출해서 데이터가 부모 컴포넌트로 전달되도록 한다.

* 기본 form 속성으로 버튼 type 이 submit 일 경우 클릭하면 페이지가 새로고침 된다.

  해당 새로고침을 방지하기 위해 handleSubmit 함수를 작성해준다.

* 리액트에서는 불변성을 꼭 유지해 줘야한다.

* 어떤 값을 수정할때는 꼭 setState 를 사용해야하며, 그 내부의 배열이나 객체를 수정해야 할 때는

   기존 배열, 객체를 수정하지 않고 원본을 기준으로 새로운 배열, 객체를 만들어서 값을 주입해 주어야 함.

* 배열에 추가하는 방식은 concat 사용 (C 언어에서 문자열 이어붙이기와 같은 명령어)

* 배열에 고유한 id 값이 증가하면서 추가되도록 할 때는

  1. '... spread 전개 연산자'를 사용

  2. 기존 속성 값을 그대로 입력

  3. object.assign 객체 사용

* state 에 변수를 선언하는 이유는, render 함수에서 사용하면서 변수가 수정되었을 때 꼭 rerender 되게끔 만들게 하기 위함

[App.js - 새로고침 방지]

handleSubmit = (e) => {

e.preventDefault();

this.props.onCreate(this.state);

this.setState({

name: '',

phone: '',

})

}

[자식 컴포넌트]

- 부모 컴포넌트로 props 전달

[App.js - 배열에 고유 id 값 증가 방법]

1)

handleCreate = (data) => {

const { information } = this.state;

this.setState({

information: information.concat({

...data,

id: this.id++,

})

});

}

2) 

handleCreate = (data) => {

const { information } = this.state;

this.setState({

information: information.concat({

name: data.name,

phone: data.phone,

id: this.id++,

})

});

}

3) 

handleCreate = (data) => {

const { information } = this.state;

this.setState({

information: information.concat( Object.assign({}, data, {

id: this.id++

}))

});

}

---

16번

[자바스크립트 배열 내장 함수 - map]

(참고)

배열 내장함수 map() : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

* 기본 배열 선언 : numbers = [1,2,3];

* map 사용 : squared = numbers.map(n => n * n);

* 사용 -> squared : [1, 4, 9]  -> 기존 numbers 배열을 제곱으로 만들어줌

- defaultProps 지정해 줄때는 항상 static 으로 선언해야 한다.

* 배열에서 키가 없다면 리스트 항목을 추가 제거할 때 매우 비효율적으로 동작한다.

[PhoneInfoList.js]

render() {

const { data } = this.props;

const list = data.map(

info => (<PhoneInfo info={info} key={info.id} />)

);

return (

<div>

{list}

</div>

);

}

---

17번

[배열 조작]

(참고)

배열 내장함수 slice : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

배열 내장함수 filter : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

* 배열은 항상 불변성을 유지해야 한다.

* slice 와 concat 을 혼합해서 배열의 중간 값만 제거할 수 있다.

* 제거 방법

 1) slice : 파라미터 (a,b) - a번째에서 시작해서 b번째 까지만 가져온다

 2) filter : 조건으로 값을 가져올 수 있다. - 기존 배열을 변경하지 않는다.

ex) slice

ex) filter

[App.js]

handleRemove = (id) => {

const { information } = this.state;

this.setState({

information: information.filter(info => info.id !== id)

});

}

1

---

(18번 영상)
[배열 안의 데이터 수정하기]