node.js 모듈을 다운받아서 쓰는 방법[github에는 용량이 크기 때문에 업로드가 되지 않음]
- 기존 React 폴더 명을 기억한다.
- 다른 컴퓨터에서 github의 pull로 받는다.
- 폴더 위치까지 powershell이나 cmd로 접근한다. – 중요
- npm install을 실행한다.
create react-app 으로 설치한 리엑트 프로젝트의 node_modules은 github에 올라가지 않기 때문에 다운로드 받아서 사용할 때는 해당 프로젝트 폴더로 들어가서 npm install을 통해 node_modules을 다운로드 받아야 한다.[위 과정 설명]
컴포넌트
클래스형
import {Component} from 'react'; 리엑트에서 A값을
class 클래스명 extends Component{
render(){ 클래스형 컴포넌트에서는 함수 대신에 render를 쓴다.
return(); 출력을 정해줘야 밑에 export에서 내보낼 수 있다
}
}
export default 클래스명; - 이 과정이 있어야 다른 곳에서도 쓸 수 있다.만약 내용을 수정하고 저장하면 수정된 값이 바로 적용된다.
함수형
화살표 함수로 만들어내는 컴포넌트컴포넌트는 여러개 작성 할 수 있다. 하나의 컴포넌트에 다른 컴포넌트를 쓸 수 있다. : <컴포넌트이름/>
다른 내용을 export를 통해 보내고 싶다면 {컴포넌트이름} 형태로 보낼 수 있다. 그런데 대부분은 하나의 컴포넌트 작성파일에서 하나의 컴포넌트를 내보낸다.
동일한 파일에서 두개이상 내보냈을 때에 각각의 값을 한꺼번에 불러내지 못하고 각각 가져와야 한다. export 형태 그대로 쓴다
props(property) : 외부에서 속성을 가져 올 때 사용
값을 전달 할 때 속성명=값 으로 전달. {}안에 들어가면 자바스크립트의 자료형태로 전달. “”안에 들어가면 문자열로 전달
<컴포넌트이름 속성명=값 />
this.props로 받아 올 수 있는데 object로 받아오기 때문에 개별로 받기 위해서 앞에 설정한 속성명만 지정 할 수 있고, 여러개 지정 시에는 {} 안에 넣는다.
<컴포넌트이름>내용</컴포넌트이름> 의 경우 내용은 prop의 children이 된다. 불러오는 것은 위랑 동일하게 this.props.children으로 불러낸다. 참고로 안의 내용이 먼저 출력되고 그다음에 컴포넌트 내용이 출력된다. 여러개 불러 낼 때 children으로 불러 낼 수 있다.
클래스 컴포넌트에서 state
constructor를 이용하여 속성을 만들어준다
이때 props 값을 상속받아온것이므로 super를 이용하여 사용 할 수 있게 한다.
State값은 자기 자신의 값이므로 this.state라는 이름을 가지고 객체형식으로 값을 저장한다.