리액트 2일(속성 이용법,외부 컴포넌트 사용,useState,상속 )

리액트 2일(속성 이용법,외부 컴포넌트 사용,useState,상속 )

노드 js  환경에서 리액트 사용

index js 파일에 아래하고는 조금 다르지만 App이라는 파일을 import해서 불러오는 형식의 파일이 있을거다 

import React from "react";

import ReactDOM from "react-dom";
import {App} from "./App.jsx"  //이파일을 사용


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

 

 

import {ColorMassage} from "./components/ColorMassage.jsx";
import { useEffect, useState } from "react";

export const App = () => {  //함수정의
    console.log(`렌더링`); 

    // state 정의
    const [num ,setNum] = useState(0);
    const onClickButton = () => {
        setNum(num+1);
        setNum(num => num+1); // 재 랜더링 

    }

    useEffect(()=> {
        console.log(`렌더링new`)
    },[num])

    const contentStyle ={  //css 객체 만들기
        color : "blue",
        fontSize : "20px"
    };

    return (
    <> 
    <h1 style={contentStyle}>안녕하세요</h1>
    <p style={{color :"red"}}>잘지내시죠</p>  
    <button onClick={onClickButton}>버튼</button>
    <ColorMassage color='green' ><h1>{num}</h1></ColorMassage>
    <p>{num}</p>



    </> 
    );
}

 

 

위 코드는 버튼을 누르면 값이 증가하는 코드 이다

 

코드를 한줄씩해석해보며서 어떻게 사용하는지 알아보자 

 

    return (
    <> 
    <h1 style={contentStyle}>안녕하세요</h1>
    <p style={{color :"red"}}>잘지내시죠</p>  
    <button onClick={onClickButton}>버튼</button>
    <ColorMassage color='green' ><h1>{num}</h1></ColorMassage>
    <p>{num}</p>

    </> 
    );

리턴 안에 있는 내용이 화면에 출력하게 해주는 부분이다 

 

첫번째줄의 h1은 안녕하세요 라고 표시하고 스타일은 css 객체인 contenStyle를 사용한다 

    const contentStyle ={  //css 객체 만들기
        color : "blue",
        fontSize : "20px"
    };

contenStyle은 색은 파란색이면 글자 크기는 20px로 ㅈ지정한다 

 

그다음주 p 태그의 스타일은 css객체를 사용하지 않고 값을 넣어서 지정하는 방식이다 

 

3번째줄 button 은 onClick로 클릭했을때 {함수}  를 실행한다 

    const [num ,setNum] = useState(0);
    const onClickButton = () => {
        setNum(num+1);
        setNum(num => num+1); // 재 랜더링 

    }

 

이때 클릭시 돌아가는 함수는 위와 같다  이때 useState 라는것을 사용하는데

이는 컴포넌트 내에서 상태를 간단히 추가하고 상태값을 변경을 감지하였을때 자동으로 컴포넌트를 재렌더링할수 있다 

버튼 클릭하였을때 값이 증가하면 재렌더링 된다 (다시 실행되다 그렇기에 화면에 값이 변화하는게 나타난다)

 

useState 를 사용방법은 [매개변수, 매개변수를 변경하는 함수] = useState (초기값지정) 으로 사용할수 있다

 

그 다음 4번째줄에는 

<ColorMassage color='green' ><h1>{num}</h1></ColorMassage> 

ColorMassage  외부 컴포넌트로 

export 로 지정하면 외부에서도 사용할수 있게된다 

export const ColorMassage = (props) => {
    console.log(props)


    const contentStyle ={
        color : props.color,
        fontsize : "20px"
    };

    // return <p style={contentStyle}>{props.message}</p>
    return <p style={contentStyle}>{props.children}</p> //칠르런 사용 
};

여기서 props는 다른 컴포넌트로 데이터를 전달할때 사숑하는 속성으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용하다.

여기서 전달한 값음 color='green' 임으로

 

    const contentStyle ={
        color : props.color,
        fontsize : "20px"
    };

 

여기서 props.color을 사용하여 green이라는 값을 받아왔다 

 

return의{props.children} 이 값은 

 

<ColorMassage color='green' ><h1>{num}</h1></ColorMassage>  이부분에서

<h1>{num}</h1> 을 의미하면 이때 num은 useState  로 지정한 값이다