개발자의 개발 블로그

물론, html 파일이 있는 디렉토리로 이동해서 더블클릭해서 브라우저로 확인할 수 있다.

그럴경우, 주소창에는 

file:///Users/jangseongho/Documents/htmlTest/index.html

이런식으로 나오게 된다.

하지만, vs code를 사용한다면 라이브 서버를 설치하여 바로 띄울 수도 있고, 코드 수정 시 리로드없이 적용이 가능하다.

아래 패키지를 설치하면 된다.

주소창에서는

http://127.0.0.1:5500/01_basic_layout.html

이렇게 바뀐다.

참고로, 127.0.0.1는 자기 자신의 로컬호스트이다.

즉, 로컬로 서버를 띄우고, 포트를 5500으로 지정된 것이다.(자동으로)

그리고, 접속을 안 할시, 금방 서버가 종료되므로 다시 접속해서 사용해야한다.

일단, React의 데이터 흐름은 단방향이다.

단방향 = 한 방향 = 위에서 아래로 내려간다 

즉, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨주는게 일반적이다.

부모 컴포넌트는(상위 컴포넌트)는 컴포넌트들을 사용하는 컨테이너 개념이다.

즉, A 컴포넌트가 B컴포넌트와 C컴포넌트를 import하여 브라우저에 보여준다면,

A 컴포넌트가 부모, B와 C가 자식 컴포넌트라고 할 수 있다.

1. 부모 컴포넌트에서 자식 컴포넌트에 값(데이터) 넘기기. 

이것이 가장 일반적인 방법이다.

create-react-app으로 리액트 프로젝트를 생성했다면, App.js가 최상위 컴포넌트라는 것을 알고 있을 것이다.

그리고, Todos.js라는 컴포넌트를 생성을 했다고 가정하면,

부모인 App.js 에 있는 데이터(state 뿐만 아니라 함수도...)를 

자식인 Todos로 보낼 수 있다. 

HTML에서 속성(Attribute)을 선언하는 식으로 "props"를 전달한다.

위 예제에서, <Todos name={this.state.name} /> 이렇게 하면, Todos로 문자열 JANG을 보낸 것이다.

이런식으로 여러개의 데이터 값들을 줄줄히 보낼 수 있다.

참고로, 이 전달된 값을 받아서 사용하기 위해서는 

Todos 컴포넌트에서 this.props.name을 사용하면 해당 데이터를 가져올 수 있다.

prop-types을 통해 props의 타입을 체크하려고 했는데 에러가 발생했다.

클래스를 함수로 부를 수 없다? 뭔말인지 한참 찾다가 발견했다.

이렇게 작성했다. 

자동생성이 아니라 하드코딩으로...

그런데, prototype으로 잘못 작성했다.

es6 이전 클래스 대신 사용하던 keyword이기 때문에 에러가 발생했다.

이와같이 propTypes로 작성해야한다.

또 주의할 점! 대문자가 아니라, 소문자  propTypes 이다.

static으로 선언된 무엇인가보다.

그리고, 타입 체크시에는 설치했던 prop-types를 사용한다.

이렇게 props의 타입을 체크하게 되면,

잘못된 형식의 props가 들어오게 되면, 

즉, 위에는 array인데 string이나 number 형태의 값이 넘겨지면,

(prop에 유효하지 않은 값이 전달되면)

자바스크립트 콘솔에 경고(Error)가 발생된다.