개발자의 개발 블로그

설치를 했고, --save를 했는데도 실행이 되지 않는다.

이렇게 했는데 와 명령을 찾을 수 없다는 것인가?

해결했다.

설치를 글로벌로 해줘야 인식한다.

즉, 귀찮아서 매우 간단히 

npm i nodemon

으로 했는데...

뭔가 설치는 된 것 같은데 뭔가 좀 인식이 안 되는 것을 보니 뭔가 문제가 있는 듯 하다.

그래서 다음과같이 다시 설치했다.

npm install -g nodemon

-g로 글로벌 설치 선언을 해줬다.

그 이유를 찾았다

프로젝트의 library가 아니라 시스템에 설치하기 때문에 --global 옵션을 사용해야 한다.

원하던 노드몬이 실행된다.

노드몬이란 무엇인가?

기본적으로 node.js로 만든 파일을 실행할때는 

node xxx.js

와 같이 한다.

이러면 

소스를 수정하고, 

Control + C로 노드 서버 실행을 종료하고, 

다시 node xxx.js를 입력하고

개발 화면을 보면 에러가 분명 100% 있을 것이므로... 

또 소스를 수정하고, 

Control + C로 노드 서버 실행을 종료하고, 

다시 node xxx.js를 입력하고

개발 화면을 보면 에러가 분명 99% 있을 것이므로...

또 소스를 수정하고, 

Control + C로 노드 서버 실행을 종료하고, 

다시 node xxx.js를 입력하고

개발 화면을 보면 에러가 분명 98% 있을 것이므로...

이런 무한반복하는 귀찮음을 막아주는 툴이다.

코드 수정 후 저장을 하면 자동으로, 재실행되므로 매우 효율적이다.

1. 터미널에 들어가서 해당 디렉토리에서 

code . 

을 입력하면 vs code가 바로 열린다.

하지만, 초기 세팅이 필요하다.

세팅없이 사용하려고 하면, 다음과 같은 에러가 발생한다.

not found이므로 found해주자.

-bash: code: command not found

설정 방법

1. VS Code 를 실행한다.

2. 명령팔레트를 실행한다. 이것은 보기 메뉴 맨 위에 위치한다. 영어로는 View - Command Pallete

3. Shell Command 입력 후 Install한다.

4. 다시 터미널로 돌아가서 재시도!

5. 뿅~

state는 무엇인가?

- 컴포넌트 내부에서 자체적으로 읽고, 업데이트할 수 있는 값을 사용하기 위해 state가 존재한다.

- 모든 리액트 컴포넌트 안에 존재할 수 있는 오브젝트이다(필수는 아니므로 없어도 된다)

- 컴포넌트 내 state가 변경될때마다 해당 컴포넌트는 다시 렌더링된다(=render()함수가 실행된다)

- 

state를 선언하는 방법

원래는 생성자(constructor) 안에 선언해야 하지만, 생성자 밖에 다음과 같이 선언할 수 있다.

이런 형식으로 작성을 하고, 사용할때는 

이런식으로 호출해서 사용하며 결과는 다음과 같다.

state를 수정하는 방법(업데이트 하는 방법)

쉽게 생각하면 이렇게 직접 수정하면 될 것 같지만 직접적인 접근은 절대 안된다.

직접적으로 변경하면 render() 설정들이 작동을 하지 않으므로 값은 바뀌지 않는다(리-렌더링이 되지 않는다)

위와같이 코드를 실행하면 다음과 같은 경고가 발생한다.

Compiled with warnings.

./src/App.js

  Line 19:  Do not mutate state directly. Use setState()  react/no-direct-mutation-state

그러므로,  다이렉트로 state값을 수정해서는 안 되며, 

아래와 같이 setState()를 사용하여 값을 변경해야 한다.

변경을 하려면, 이렇게 setState()를 사용한다. 그래야 render()가 정상적으로 리렌더링된다.

즉, setState가 사용되어 state를 변경하면 render()함수가 정상적으로 재작동하게 되며,

state의 값은 새롭게 변경된다. this.setState({}) 으로 기억해두자. 

메소드 ()안에 객체{} 값이 들어가니까..

항상 아래와 같은 구조를 지닌다.

this.setState({

...

.....

})

setState()메소드의 역할은 파라미터로 전달받은 필드를 업데이한 뒤, 컴포넌트가 리렌더링하게 한다.

만약, 렌더링 된 후 몇 초 후에 state값을 바꾸고 싶다면 어떻게 할까?

자바스크립트 문법 중 setTimeout() 함수를 사용하면 된다.

위 코드는 setTimeout() 함수를 사용하여 2초 후에 setState()메소드를 사용하여 state를 변경하는 코드이다.

setTimeout() 함수를 사용하여 state 내 배열에 항목을 추가하려면 어떻게 할까?

2초 후에 person 목록에 추가된다.

그런데, 주의할 점이 있다. 

배열안에

...this.state.person

을 써줘야한다. 이것을 해야 기존 배열이 살아있고, 그 뒤에 추가가 되는 것이다.

이것을 써주지 않으면 person이라는 배열은 기존값들이 전부 사라지고 추가한 항목만 남게 된다.

state와 prop의 가장 큰 차이점은

props는 부모 컴포넌트가 설정하고, 해당 컴포넌트는 받아서 사용하는 "읽기 전용",

state는 해당 컴포넌트가 자체적으로 지난 값으로, 읽을수 있을뿐만 아니라 값을 업데이트하는 기능.