React, 1일차

create-react-app을 사용하여 앱을 생성 후 기본 디렉토리 및 파일 확인

public 디렉토리
브라우저에서 직접 액세스 할 수 있는 파일들이 포함
    index.html: 웹 애플리케이션의 진입점

src 디렉토리
애플리케이션의 소스 코드를 포함 
    index.js: React 앱의 진입점 파일. ReactDOM.render를 호출하여 React 컴포넌트르 DOM에 렌더링
    App.js: 기본적인 앱 컴포넌트가 정의된 파일. 앱의 기본 구조와 레이아웃을 정의
    App.css : App 컴포넌트에 적용되는 CSS 스타일을 정의

문제
App.css에 아래와 같이 style을 설정하고  App.js에 적용해보자 

    이름: .black-box
    속성: 
        background: black
        width: 80px;
        height: 80px;

크롬 브라우저 확장 프로그램 설치
React Developer Tools 


JSX에서의 주석

{/* 주석을 작성 */}


컴퍼넌트에게 값 전달하기

     JSX 
     <Hello userid="apple"/>

     Component
     function Hello(props) {
        <div>안녕하세요. {props.userid}님 </div>
     }

✔ JSX에서 null, false, undefined를 랜더링 하면 화면에 아무것도 출력하지 않음 


문제

JSX를 사용하여 아래와 같이 출력되도록 작성해보자. 
(단, 프로젝트의 이름은 jsx로 함)

    김사과님이 학습한 내용들
    * 파이썬 
    * HTML 
    * CSS 
    * JavaScript 
    * MySQL
    * MongoDB 

    [이미지]

 

 

 

// App.js

import React from "react";
import Hello from "./Hello";
import Member from "./Member";
import Wrapper from "./Wrapper";
import './App.css';

function App(){

  const userid = 'apple';
  // background-color
  const style = {
    backgroundColor: 'deepskyblue',
    color: 'deeppink',
    fontSize: 30,
    padding: '1em'
  }

  return (
    <>
      {/* 주석은 화면에 보이지 않습니다 */}
      <Hello/>
      <Hello/>
      <Hello userid="apple"/>
      <Hello userid="apple" name="김사과" color="deeppink"/>
      <div>DIV 사용</div>
      <div style={style}>아이디: {userid}</div>
      <div className="black-box"></div>
      <Member userid="banana" name="반하나" color="deepskyblue"/>

      <Wrapper>
        <Hello userid="apple" name="김사과" color="deeppink" />
        <Hello userid="banana" name="반하나" color="deepskyblue" />
        <Member userid="orange" name="오렌지" color="gold" isLover={true}/>
        <Member userid="melon" name="이메론" color="yellowgreen" isLover={false}/>

      </Wrapper>
    </>
  );
}

export default App;

 

// App.css

.black-box {
  background: black;
  width: 80px;
  height: 80px;
}

 

// Hello.js

import React from 'react';

function Hello(props){
    return <div style={{color: props.color}}>안녕하세요 {props.userid}({props.name})</div>
}

Hello.defaultProps = {
    userid: '아이디없음',
    name: '이름없음',
    color: 'blue'
}

export default Hello;

 

// Member.js

 

import React from 'react';

function Member({ userid, name, color, isLover }){
    return <div style={{ color }}>안녕하세요 {userid}({name} { isLover && <b>❤</b>
    })</div>

    {/* { isLover ? <b>❤</b> : null} */}
}

export default Member;

 

// Wrapper.js

 

import React from "react";

function Wrapper({ children }) {
    const style = {
        border: "3px solid deeppink",
        padding: '10px'
    }

    return (
        <div style={style}>
            { children }
        </div>
    )
}

export default Wrapper;

 

 

jsx

 

// App.js

// App.js

import React from "react";
import './App.css';

function App() {
  const name = '김사과';
  const list = ['파이썬', 'HTML', 'CSS', 'JavaScript', 'MySQL', 'MongoDB'];
  return (
    <>
      <h2 className="deeppink">{name}님이 학습한 내용들</h2>
      <ul>
        {
          list.map((item) => (
            <li>{item}</li>
          ))
        }
      </ul>
      <img style={{ width: '200px', height: '100px' }} src="https://live.lge.co.kr/wp-content/uploads/2020/06/AI%EC%9A%A9%EC%96%B4%EC%82%AC%EC%A0%84_00-1-1.jpg" alt="AI"></img>
    </>
  );
}

export default App;

 

// App.css

/* App.css */

.deeppink{
  color: deeppink;
}