<클론코딩 영화="" 평점="" 웹="" 서비스=""> 책을 통한 리액트 학습

책을 학습하며 알게된 리액트 지식을 정리한 글입니다.

public 폴더

• favicon.ico 파일 : 브라우저 제목과 함께 표시되는 아이콘

창을 열 때, 상단 웹 페이지 표시줄을 보면 맨 앞에 표시되는 아이콘이 있다. 이곳에 표시될 아이콘을 의미한다.

프로젝트 시, 해당 아이콘 디자인 작업이 필요할 것이다.

• index.html 파일 : 기본 내용이 작성된다. 이 곳은 건들일 일이 거의 없다. (이 외의 파일들도 마찬가지이다.)

src 폴더

• App.js에서 수정을 이루면 창에 해당 내용이 적힌다.

리액트 동작 원리

• App.js와 index.js와 같은 폴더 코드들을 해석하여 그 결과물을,

index.html에 <div id="root"> </div>사이에 끼워 넣는다.

터미널을 종료하면,,,

• 터미널을 종료하면 리액트 앱의 실행이 유지되지 않는다.

나는.. 깨달았다.. 초보자들이 많이 저지르는 실수라고 한다. 터미널을 유지시키는 것을 잊지말자!

컴포넌트

• 리액트는 컴포넌트로 화면에 그려진다.

App.js의 컴포넌트를 index.js에 import하여 아이디가 root 에 그려지도록 정의한다.

그러면 아이디가 root인 것이 index.html에 끼워져서 출력되는 것이다.

리액트 앱은 모두 컴포넌트로 구성된다 ex.

컴포넌트 만들기

• src 폴더에 대문자로 시작하는 이름의 js 파일 만들기 (예시. Potato.js)

  • Potato.js 파일의 코드

import React from 'react';

function Potato(){
    return <h3> I love potato</h3>;
}

export default Potato;

• App.js 파일의 코드

import React from 'react';
import Potato from './Potato';

function App() {
  return  (
  <div> 
    <h1>Hello</h1> 
    <Potato />
  </div>
  );
}

export default App;

• 짧은 코드를 가진 컴포넌트의 경우 App.js 안에서 내부 함수를 만들어 컴포넌트를 이용할 수 있다.

  • App.js 파일의 코드

import React from 'react';

function Potato() {
  return <h1> I like potato</h1>;
}

function App() {
  return  (
  <div> 
    <h1>Hello</h1> 
    <Potato />
  </div>
  );
}

export default App;

props

• 컴포넌트에서 컴포넌트로 전달하는 데이터

• 컴포넌트의 재사용을 돕는다.

• 컴포넌트에 데이터 형태와 데이터 값을 담는다.

• 사용하기 위해서는 컴포넌트를 정의한 함수의 파라미터를 이용하여 화면에 표시{}하거나 console.log()로 데이터를 전달한다.