03) 리액트 개념 익히기

1. 리액트 앱 실행 복습하기

- npm start의 터미널 명령을 종료하면 리액트 앱 실행이 종료되므로, "localHost에서 연결을 거부했습니다."에러 발생 

  -> 리액트 공부 시엔 터미널이 종료되지 않도록 유의

 

2. 컴포넌트

   2-1) 컴포넌트 정의하기

 

   2-2) 컴포넌트 사용하기

 

           - 리액트는 <App />을  App.js의 컴포넌트로 인식

           - ReactDOM.render() : App() 컴포넌트가 반환하는 것을 id = 'root'인 엘리먼트에서 그려줌 

           - id가 'root'인 엘리먼트는 index.html에서 정의함

 

2-3) 정리

         1. 리액트는 컴포넌트와 함께 동작

         2. 리액트 앱은 모두 컴포넌트로 구성됨

 

3. JSX

 3-1) JSX란?

       -  컴포넌트 생성 시 사용되는 문법

        - 자바 스크립트와 html의 조합

 

 3-2) 컴포넌트 추가하기

  - 방법 1. Potato.js 생성 후  App 컴포넌트 안에 Potato 컴포넌트를 포함시킴

 

방법2. App.js에 Potato()컨테이너를 정의

 

결과

 

4. PROPS

4-1 ) PROP란

   - 리액트 컴포넌트로 너어가는 매개변수

   - 컴포넌트에서 컴포넌트로 전달하는 데이터. 컴포넌트를 효율적으로 재사용 가능하게 함

   - props값은 문자열을 제외하고 반드시 {}로 값을 감싸야 한다.

     <Food fav = "kimchi" something ={true} papapa = {['hello', 1, 2, true] } /> 

 

4-2) 컴포넌트에 props 사용해서 변수 생성하기