react

Do it 클론 코딩 영화 평점 웹서비스 - 3장

Feb 13, 2021

3장

3. 리액트 기초 개념 알아보기

3.1 리액트 앱 실행 복습

// App.js
function App() {
  // return <div className="App"/>;
  return (
    <div>
      <h1>Hello!!!</h1>
    </div>
  )
}

3.2 첫 번째 리액트 기초 개념 : 컴포넌트

// App.js
function App() {
  // return <div className="App"/>;
  return (
    <div>
      <h1>Hello!!!</h1>
    </div>
  )
}
import App from './App';

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

// <App /> 이게 바로 App컴포넌트를 임포트하여 사용한 것이다.
// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

3.3 두 번째 리액트 기초 개념 : JSX

// Potato.js
import React from 'react'; // 맨 위에 입력

function Potato() {
  return <h3>I LOVE POTATO !!!</h3> // HTML이 아니라 JSX이다.
}

export default Potato; // 마지막 줄에 입력
import React from 'react';
import Dog from './Dog'; // 외부 파일은 임포트 해야 한다, ./ : 현재 파일이 있는 폴더

function Potato() {
  return <h3>I LOVE POTATO</h3>
}

function Oil() {
  return <h2> Oil !!! </h2>
}

function App() {
  return (
    <div>
      <h1>Hello!!!</h1>
      <Potato/>
      <Oil/>
      <Dog/>
    </div>
  )
}

export default App;

/*  Potato, Oil은 내부, Dog는 외부 컴포넌트이다.
Hello!!!
I LOVE POTATO
Oil !!!
Dog Component ~ ~
*/

3.4 세 번째 리액트 기초 개념 : props

import React from 'react';

function Food(props) {
  // Food 컴포넌트에 있는 props에 있는 데이터 "kimchi"를 화면에 출력하는 법
  // props를 콘솔로 출력해보면 Object형태가 되는데 
  // 객체는 점 연산자(.)를 사용한다.
  return <h1> I like {props.fav}</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello!!!</h1>
      <Food fav="kimchi" />  // fav는 favorite의 줄임말임
      <Food fav="순대" />
      // 문자열인 '라면'을 제외하고는 전부 중괄로로 감싸고 있지??
      <Food fav="라면" somthing={true}, papapapa={['hello', 1, 2, 3, 4, true]}>
    </div>
  )
}

export default App;
import React from 'react';

function Food({fav}) {
  return <h1> I like {fav}</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello!!!</h1>
      <Food fav="kimchi" />
      <Food fav="오징어" />
    </div>
  )
}

export default App;

3.5 알아본 것