react공부 시작

2021.07.28

생활코딩 - React 수업을 한사이클 듣고 추가적인 공부를 할 예정입니다.

 

 

1. react 설치 및 개발환경 구성

 

npm을 이용해 Create React App을 설치했습니다.

개인적으로 npm은 Node.js로 만들어진 일종의 스토어 같다고 이해했습니다. (정확하지 않습니다.)

VScode Terminal에 npm install을 입력해 Create React App을 노트북 어디서든 이용할 수 있도록 하였습니다.

 

 

2. 구조 파악

 

기본적으로 public, src, css 디렉토리로 나뉘어져 있었습니다.

모든 컴포넌트(아래에서 설명)들이 'root' div 태그 사이에 삽입되어 있는 구조로 보였습니다.

src 디렉토리에서 실질적인 코딩을 합니다.

 

ReactDom.render(</App/>, document.getElementById('root')); 

이 부분을 해석해보았습니다.

(삽입된 App.js 파일, id가 root인 엘리먼트)

 

 

3. Component. 

 

컴포넌트 개념은 react의 핵심이라고 생각합니다. 

 

class App extends Component {

  render(){

   return(

    <div className="App">

       <Subject></Subject>

    </div>

   )

  }

}

 

위 코드처럼 App도 컴포넌트 중 하나입니다.

Subject라는 컴포넌트를 직접 만들어 사용자 정의 태그 안에 넣었습니다.

후에 만들어진 컴포넌트들이 유기적으로 연결되며 동작을 하는 것이 Best라고 생각합니다. 

 

 

 

 

오늘은 여기까지 배운 내용을 정리하고 후에 State와 Props에 대해 정리 해보겠습니다.