[React] TIL 087 - 23.11.30

React : JSX

Exam5.js

import React, { useState } from "react";

function Exam5() {
    //return <Exam5_1 />
    //return <Exam5_2 />
    //return <Exam5_3 isLogin={false} />
    return <Exam5_4 />
}

// jsx 예제 1 : 기본 태그 // 속성에 넣는 값 : 변수
function Exam5_1() {

    const name = "React";
    const element = <h1>Hello, {name} !</h1>;

    return element;
}

// jsx 예제 2 : img 태그 // 속성에 넣는 값 : 상태
function Exam5_2() {

    const [userImg, setUserImg] = useState("https://i.ibb.co/b7CSJ51/image.jpg");
    const element = <img src={userImg} />

    return element;
}

// jsx 예제 3 : 로그인 여부에 따라 화면 다르게 보이기
function Exam5_3(props) {

    if(props.isLogin) {
        return <h1>Welcome~!</h1>;
    } else {
        return <h1>Please sign up</h1>;
    }

}

// jsx 예제 4 : 배열을 이용한 화면 랜더링 // 리액트 개발 시 가장 많이 사용하는 방법!
function Exam5_4() {

    const numbers = [1, 2, 3, 4, 5];

    const listItems = numbers.map((number) => <li>{number}</li>);
    // [<li>{number}</li>, <li>{number}</li>, <li>{number}</li>, <li>{number}</li>, <li>{number}</li>]

    return <ul>{listItems}</ul>
    /*
    <ul>
       <li>{number}</li>
       <li>{number}</li>
       <li>{number}</li>
       <li>{number}</li>
       <li>{number}</li> 
    </ul>
    */

}


export default Exam5;

• isLogin={true} -> 분기처리 가능!
  

• isLogin={false}
  

App.js

import logo from './logo.svg';
import './App.css';
import Exam1 from './component/Exam1';
import Exam2 from './component/Exam2';
import Exam3 from './component/Exam3';
import Exam4 from './component/Exam4';
import Exam5 from './component/Exam5';
import Exam6_1 from './component/Exam6_1';
import Exam6_2 from './component/Exam6_2';

function App() {
  return (
    <div className="App">
      {/* <h1>Hello World!</h1> */}
      {/* <Exam1 /> */}
      {/* <Exam2 /> */}
      {/* jsx 주석처리 : 주석 처리 하고 싶은 곳 커서두고 Ctrl + / = 쉽게 주석처리 가능! */}
      {/* <Exam3 /> */}
      {/* <Exam4 /> */}
      <Exam5 />
      {/* <Exam6_1 /> */}
      {/* <Exam6_2 /> */}
    </div>
  );
}

export default App;

Exam6_1.js

// Context API 사용 안했을 때

import React, { useState } from "react";

// 최상위 컴포넌트
function Exam6_1() {
    const [user, setUser] = useState("홍길동"); // 상태

    return (
        <>
            <h1>Hello {user}</h1>
            <Component2 user={user} />
        </>
    );
}

function Component2({user}) {
    return (
        <>
            <h1>Component 2</h1>
            <Component3 user={user} />
        </>
    )
}

function Component3({user}) {
    return (
        <>
            <h1>Component 3</h1>
            <Component4 user={user} />
        </>
    )
}

function Component4({user}) {
    return (
        <>
            <h1>Component 4</h1>
            <Component5 user={user} />
        </>
    )
}

function Component5({user}) {
    return (
        <>
            <h1>Component 5</h1>
            <h1>Welcome {user} !</h1>
        </>
    )
}



export default Exam6_1;

App.js

import logo from './logo.svg';
import './App.css';
import Exam1 from './component/Exam1';
import Exam2 from './component/Exam2';
import Exam3 from './component/Exam3';
import Exam4 from './component/Exam4';
import Exam5 from './component/Exam5';
import Exam6_1 from './component/Exam6_1';
import Exam6_2 from './component/Exam6_2';

function App() {
  return (
    <div className="App">
      {/* <h1>Hello World!</h1> */}
      {/* <Exam1 /> */}
      {/* <Exam2 /> */}
      {/* jsx 주석처리 : 주석 처리 하고 싶은 곳 커서두고 Ctrl + / = 쉽게 주석처리 가능! */}
      {/* <Exam3 /> */}
      {/* <Exam4 /> */}
      {/* <Exam5 /> */}
      <Exam6_1 />
      {/* <Exam6_2 /> */}
    </div>
  );
}

export default App;

Exam6_2.js

// Context API 사용 했을 때

import React, { useState, useContext, createContext } from "react";

// Context API : React 컴포넌트 트리 전체에서 데이터를 공유할 수 있는 방법을 제공
//              중첩된 구조에서 데이터를 전달하는 데 있어서 불필요한 props drilling 을 방지함
//              사용하기 위해선 useContext hook이 필요함

// createContext() : Context 객체를 생성시 사용
const UserContext = createContext();

// 최상위 컴포넌트
function Exam6_2() {
    const [user, setUser] = useState("홍길동"); // 상태

    // Context.Provider : 하위 컴포넌트에게 데이터를 전달할 때 사용
    return (
        <UserContext.Provider value={user}>
            <h1>Hello {user}</h1>
            <Component2 />
        </UserContext.Provider>
    );
}

function Component2() {
    return (
        <>
            <h1>Component 2</h1>
            <Component3 />
        </>
    )
}

function Component3() {
    return (
        <>
            <h1>Component 3</h1>
            <Component4 />
        </>
    )
}

function Component4() {
    return (
        <>
            <h1>Component 4</h1>
            <Component5 />
        </>
    )
}

function Component5() {
    const user = useContext(UserContext); // 후손 어디서든 사용 가능!

    return (
        <>
            <h1>Component 5</h1>
            <h1>Welcome {user} !</h1>
        </>
    )
}



export default Exam6_2;

App.js

import logo from './logo.svg';
import './App.css';
import Exam1 from './component/Exam1';
import Exam2 from './component/Exam2';
import Exam3 from './component/Exam3';
import Exam4 from './component/Exam4';
import Exam5 from './component/Exam5';
import Exam6_1 from './component/Exam6_1';
import Exam6_2 from './component/Exam6_2';

function App() {
  return (
    <div className="App">
      {/* <h1>Hello World!</h1> */}
      {/* <Exam1 /> */}
      {/* <Exam2 /> */}
      {/* jsx 주석처리 : 주석 처리 하고 싶은 곳 커서두고 Ctrl + / = 쉽게 주석처리 가능! */}
      {/* <Exam3 /> */}
      {/* <Exam4 /> */}
      {/* <Exam5 /> */}
      {/* <Exam6_1 /> */}
      <Exam6_2 />
    </div>
  );
}

export default App;

---

React도 시험이 있으니 열심히 공부하자 !