ReactJS 정리 (1) 개발환경과 기본개념

※ 이 게시물은 React만 설명하는 것이 아니라 강좌를 듣고 공부한 내용을 기록하는 글이다

React 컴포넌트 기능

1. 가독성 : 컴포넌트 사용

2. 재사용성 : 컴포넌트를 한 번 정의해놓으면 다른 곳에서도 사용 가능

3. 유지보수 : 컴포넌트를 바꾸면 해당 컴포넌트를 사용하는 모든 곳에서 변경

 

개발 순서

1. coding : 코딩

2. run : 실행

3. deploy : 서비스를 사용하는 소비자에게 전달

 

설치 방법

React 설치 방법에는 크게 두 가지가 있다

1. npm 이용

npm install -g create-react-app

이 방법은 한 번 다운로드를 받고 이후 추가적인 다운로드가 필요 없는 편리함이 있으나 최신 버전 갱신이 안 된다

2. npx 이용

npx create-react-app

이 방법은 프로그램을 한 번만 실행시키고 지우는 방법이다

매번 다운로드를 하는 번거로움이 있으나 최신 버전의 react를 사용할 수 있고, 사용 후 삭제되기 때문에 용량 차지가 덜하다

 

개발환경 구축

Window 기준으로 명령어 프롬프트(cmd)에서 개발할 디렉토리에 들어간 후,

create-react-app .

다음 명령어를 입력한다 시간은 다소 오래 걸린다

 

개발환경 실행

설치가 다 되었으면 npm을 이용하여 실행한다

npm run start

 

컴포넌트 생성 방법

class 컴포넌트이름 extends Component{
  render(){
    return ();
  }
}

컴포넌트를 만들 때는 반드시! 하나의 최상위 태그로 시작해야 한다

→ 즉 return 안의 값이 하나의 최상위 태그로 묶여있어야 한다

 

렌더링(Rendering)

React에서 컴포넌트를 사용하기 위해 class 안에 render() 및 return을 정의한다

렌더링(Rendering)이란 HTML, React 요소 등의 코드(결과물)를 눈으로 볼 수 있도록 배포하는 것을 말한다

 

컴포넌트 분리

컴포넌트는 각각 js 파일로 분리하여 사용한다

다른 컴포넌트에서 사용시 데이터를 내보낼 컴포넌트는 export default하고, 데이터를 쓸 컴포넌트는 import한다

 

Props

Props는 이전 글에서도 말했듯이 부모에서 자식으로 전달하는 데이터의 형태를 말한다

컴포넌트 생성시 return 안에 {this.props.속성명} 형태를 이용하여 여러 곳에서 사용할 수 있다

import Subject from "./address" //해당 컴포넌트 주소(js 생략 가능)

class App extends Component {
  render(){
    return (
      <Subject title="WEB" sub="this is web"></Subject>
      <Subject title="CSS" sub="this is css"></Subject>	// title, sub값 변경하여 재사용 가능
    );
  }
}

부모 컴포넌트인 App에서 자식 컴포넌트의 Subject에게 속성이름과 속성값을 지정해주어 값을 전달한다

class Subject extends Component {
  render(){
    return (
      <header>
	<h1>{this.props.title} </h1>			// this.props.속성
	{this.props.sub}				// this.props.속성
      </header>
    );
  }
}

export default Subject;

자식 컴포넌트인 Subject에서 부모 컴포넌트인 App으로부터 props형태로 데이터를 받는다

각 속성값을 출력하기 위해 {this.props.속성명} 을 이용하여 값을 출력한다 

참고로 props의 값은 read-only로, 수정할 수 없다