[리액트] 데이터 불러오는 방법

*컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다 

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다.

 

1.기본

//기본
import React from "react";
function Main(){
    return (
        <div id="wrap">
            <section id="main">
                <div className="main__cont">
                    <div>WE PROVIDE</div>
                    <div>VISUAL CODING</div>
                    <div>SOLUTIONS</div>
                    <div>FOR YOU WEBS</div>
                </div>
            </section>
        </div>
    )
}
export default Main;

2.함수로 불러오기

//함수로 불러오기
import React from "react";

function MainCont(){
    return (
        <div className="main__cont">
            <div>WE PROVIDE</div>
            <div>VISUAL CODING</div>
            <div>SOLUTIONS</div>
            <div>FOR YOU WEBS</div>
        </div>
    )
}

function Main(){
    return (
        <div id="wrap">
            <section id="main">
                <MainCont /> //메인 컨텐츠를 컴포넌트화
            </section>
        </div>
    )
}

export default Main;

3.props 전달

props

“props” (props는 속성을 나타내는 데이터입니다) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다. 이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 “함수 컴포넌트”라고 호칭합니다.

//props 전달
import React from "react";
function MainCont(props){
    return (
        <div className="main__cont">
            <div>{props.text1}</div>
            <div>{props.text2}</div>
            <div>{props.text3}</div>
            <div>{props.text4}</div>
        </div>
    )
}

function Main(){
    return (
        <div id="wrap">
            <section id="main">
                <MainCont
                    text1 = "WE PROVIDE"
                    text2 = "VISUAL CODING"
                    text3 = "SOLUTIONS"
                    text4 = "FOR YOU WEBS"
                />
            </section>
        </div>
    )
}
export default Main;

4.props 생략, 객체 불러오기

//props 생략, *객체 불러오기
//데이터를 변수로 설정해두고 불러옴
import React from "react";
function MainCont({text1, text2, text3, text4}){
    return (
        <div className="main__cont">
            <div>{text1}</div>
            <div>{text2}</div>
            <div>{text3}</div>
            <div>{text4}</div>
        </div>
    )
}

const mainText = {
    text1 : "WE PROVIDE",
    text2 : "VISUAL CODING",
    text3 : "SOLUTIONS",
    text4 : "FOR YOU WEBS",
}

function Main(){
    return (
        <div id="wrap">
            <section id="main">
                <MainCont
                    text1 = {mainText.text1}
                    text2 = {mainText.text2}
                    text3 = {mainText.text3}
                    text4 = {mainText.text4}
                />
            </section>
        </div>
    )
}

export default Main;

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

import React from "react";

function MainInfo(){
    return (
        <>
            <div>{mainText.text1}</div>
            <div>{mainText.text2}</div>
            <div>{mainText.text3}</div>
            <div>{mainText.text4}</div>
        </>
    )
}

const mainText = {
    text1 : "WE PROVIDE",
    text2 : "VISUAL CODING",
    text3 : "SOLUTIONS",
    text4 : "FOR YOU WEBS"
}

function MainCont(){
    return (
        <section className="main__cont">
            <div className="main__inner">
                <MainInfo />
            </div>
        </section>
    )
}
export default MainCont;

5.(배열 안)객체 불러오기, map메서드

//(배열 안)객체 불러오기, map메서드 이용하여 불러오기
import React from "react";

function Info({text}){
    return <div>{text}</div>;
}

//text로 표기
const mainText = [
    {text : "We Provide"},
    {text : "Visual coding"},
    {text : "Solutions"},
    {text : "for you webs"}
]

function Main(){
    return (
        <div id="wrap">
            <section id="main">
                <div className="main__cont">
                    {mainText.map((text) => (
                        <Info text={text.text} />
                    ))}
                </div>
            </section>
        </div>
    )
}

export default Main;

5-1 //함수형 컨퍼넌트 * 클래스 컨퍼넌트 --> 리액트 훅 //5번 에러 방지를 위한 key값 추가

//함수형 컨퍼넌트 * 클래스 컨퍼넌트 --> 리액트 훅
//5번 에러 방지를 위한 key값 추가
import React from "react";
function Info({text}){
    return <div>{text}</div>;
}

//text로 표기
const mainText = [
    {text : "We Provide"},
    {text : "Visual coding"},
    {text : "Solutions"},
    {text : "for you webs"}
]

function Main(){
    return (
        <div id="wrap">
            <section id="main">
                <div className="main__cont">
                    {mainText.map((text) => (
                        <Info text={text.text} key={text.text} />
                    ))}
                </div>
            </section>
        </div>
    )
}
export default Main;