Today I Learned 1130

React : JSX, Context api

JSX

JavaScript 확장 문법으로, React에서 UI를 작성할 때 사용

예시 : 이미지 출력

import React, { useState } from "react";
function Exam5 () {
 
    return <Exam5_2 />
}

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

    return element;
}

이미지 주소를 userImg 로 선언한 다음 해당 값을 이용해 이미지 태그를 element 로 지정

예시 : 로그인(임시)

import React, { useState } from "react";

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

// isLogin 속성에 따라 다르게 반환
function Exam5_3(props) {

    if(props.isLogin){
        return <h1>유저일님 환영합니다</h1>;
    }else{
        return <h1>로그인 후 이용해주세요</h1>;
    }
    
}

상위 컴포넌트에서 isLogin{false} 를 전달하고 하위 컴포넌트에서 이를 props 로 전달받아서 props.isLogin 으로 로그인 유무 확인.
로그인이 true, false 에 따라 다른 값을 출력함

예시 : 배열을 이용한 화면 랜더링 -> 많이 사용

import React, { useState } from "react";
function Exam5 () {
    return <Exam5_4 />
}

function Exam5_4() {
    const numbers = [1,2,3,4,5];
    const listItems = numbers.map((number) => <li>{number}</li>);

    return <ul>{listItems}</ul>
}

.map() 이라는 내장함수를 이용해 배열의 값 하나씩 number로 접근 -> li 태그 안에 작성
이후 listItems 를 ul 태그 안에 작성하면 numbers 안의 배열이 리스트로 나열된다.

---

Context api

Context API는 React 컴포넌트 트리 전체에서 데이터를 공유할 수 있는 방법을 제공하여 중첩된 구조에서 데이터를 전달하는 데 있어서 불필요한 props drilling을 방지

props drilling : React 컴포넌트 구조에서 하위 컴포넌트로 데이터를 전달하기
위해 상위 컴포넌트를 거치는 과정

예시 : Context API 를 사용하지 않을 때

// Context API 사용 X
import React, { Component, useState } from 'react';

// 최상위 컴포넌트에서 사용한 값을 최하위 컴포넌트에서 사용하고 싶을 때
// 하위 컴포넌트로 값 전달을 계속 해야됨
function Exam6_1() {
    const [user, setUser] = useState("홍길동");

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


function Component2({user}) {
    
    return (
        <div>
             <h1>Component2</h1>
            <Component3 user={user} />
        </div>
    );
};


function Component3({user}) {
   

    return (
        <div>
             <h1>Component3</h1>
            <Component4 user={user} />
        </div>
    );
};



function Component4({user}) {
  

    return (
        <div>
             <h1>Component4</h1>
            <Component5 user={user} />
        </div>
    );
};


function Component5({user}) {
    

    return (
        <div>
            <h1>Component5</h1>
            <h1>Welcome {user}</h1>    
        </div>
    );
};



export default Exam6_1;

이처럼 최상위 컴포넌트에서 설정한 값을 최하위 컴포넌트(Component5)에서 사용하고 싶을 때 중간에 있는 컴포넌트에 계속 값을 전달해야됨 => 코드 복잡, 유지보수 불편(props drilling)

예시 : Context API 를 사용할 경우

// Context API 사용 
// Context API : React 컴포넌트 트리 전체에서 데이터를 공유할 수 있는 방법을 제공
// => 중첩된 구조에서 데이터를 전달할 때 불필요한 props drilling 방지
// userContext hook 이 필요함
// createContext() : Context 객체를 생성 시 사용
import React, { Component, createContext, useContext, useState } from 'react';
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 (
        <div>
             <h1>Component2</h1>
            <Component3  />
        </div>
    );
};


function Component3() {
   

    return (
        <div>
             <h1>Component3</h1>
            <Component4  />
        </div>
    );
};



function Component4() {
  

    return (
        <div>
             <h1>Component4</h1>
            <Component5  />
        </div>
    );
};


function Component5() {
    const user = useContext(UserContext);

    return (
        <div>
            <h1>Component5</h1>
            <h1>Welcome {user}</h1>    
        </div>
    );
};



export default Exam6_2;

createContext 를 이용해 UserContext 생성, 이후 최상위 컴포넌트에서 <UserContext.Provider value={user}> 이런 태그로 지정하면 모든 하위 컴포넌트에서
useContext(UserContext)를 통해 value 인 user 값을 불러와서 사용할 수 있다.