[React] 리액트 시작

💡 node.js 와 React 관계

node.js는 JavaScript Runtime 환경으로 React를 더 편하게 사용하도록 도와주는 오픈소스이다.

• node.js를 설치하면 NPM(Node Package Manager)이라는 패키지 관리자가 같이 설치되고 이것을 통해 React 개발에 필요한 다양한 모듈을 사용할 수 있다!
• React는 사용자 UI를 개발하는데 사용되는 자바스크립트 라이브러리이다.  가상 DOM을 사용해서 성능을 최적화 하고 실제 DOM 조작을 최소화하기 때문에 웹 애플리케이션 성능을 향상시키고 빠르게 렌더링이 가능해진다.

(?) What's 'DOM'
1. DOM(Document Object Model)은 웹 페이지의 구조화된 표현을 제공하는 인터페이스이다.
2. DOM은 트리 구조로 되어 있어 HTML 문서의 요소와 계층 구조를 표현할 수 있다.
3. JavaScript를 통해 접근하고 조작할 수 있으며, 웹 페이지의 내용, 구조 및 스타일을 동적으로 변경할 수 있다.
4. 웹 브라우저와 웹 페이지 간의 인터페이스 역할을 한다.

 

 

React에서, 컴포넌트(component)는 앱의 일부를 렌더링하는 재사용가능한 모듈이다.

➡️ 컴포넌트는 JavaScript 클래스나 함수로 정의된다.

 

상단의 import 문 - 중앙의 App 컴포넌트 - 하단의 export 문으로 구성하는 것이 가장 보편적이다.

 

✅ 상단의 import 문은 App.js가 다른 곳에 정의된 코드들을 사용할 수 있게 가져오는 역할

 

✅ 중간의 App 컴포넌트는 파스칼-케이스(pascal-case) 변수 이름을 사용, app(x)

(JSX 요소가 React 컴포넌트이지, 정규 HTML 태그가 아니라는 것을 분명히 하기 위해서)

 

✅ 하단의 export 문은 App 컴포넌트들을 다른 모듈에서 사용할 수 있도록 내보내는 역할

 

<index.js>

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App.jsx';
import reportWebVitals from './reportWebVitals.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

<App.js>

/* 컴포넌트 파일의 확장자는 jsx로 사용할 것 권장 */
import { useState } from "react";
import { useEffect } from "react";
import { ColorMessage } from "./components/ColorMessage";

/* export */
const App = () => { // JSX 표기법에서는 함수의 반환값으로 HTML 태그를 기술할 수 있고, 그것을 컴포넌트로 다뤄 화면을 구성한다.

    
    //console.log("렌더링");      // State 업데이트 시 컴포넌트가 재렌더링되어 함수 컴포넌트가 처음부터 다시 실행된다.
    // State 정의
    const [num, setNum] = useState(0);
    
    /* State의 값이 변했을 때만 경고 표시 */
    useEffect(() => {
        alert(`num의 값이 ${num}으로 변경되었습니다.`);
    }, [num]);      // 컴포넌트는 재렌더링을 많이 반복하기 때문에 재렌더링할 때마다 처리를 실행하는 것이 아닌 특정 State가 변경되었을 때마다 처리를 실행하게끔 만든다.

    // 버튼 클릭 시 실행되는 함수 정의
    // 버튼 클릭 시 State를 카운트 업
    const onClickButton = () => {
        setNum((prev) => prev + 1);     // setNum(num + 1)과 같이 작성하면 연속 호출 시 기존의 num 값만 반복해서 읽으므로 클릭을 해도 숫자가 1씩만 증가한다.
    }
    
    return (    // 여러 개의 태그를 반환하려면 return할 값을 ()로 감싼다.
        <>
            <h1 style={{ color: "red" }}>안녕하세요!</h1>
            <ColorMessage color="blue" message="잘 지내시죠?"></ColorMessage> //props.message
            <ColorMessage color="pink">잘 지냅니다.</ColorMessage> //props.children
            <button onClick={onClickButton}>버튼</button>
            <p>{num}</p>
        </>
    );
    // return 이후는 한 개의 태그로 둘러 싸여 있어야 한다.
    // 불필요한 DOM을 생성하지 않기 위해 Fragment 태그(<Fragment></Fragment>)로 감싸거나 빈 태그(<></>)로 감쌀 수 있다.
};

export default App;

 

props / children

 

props는 React 컴포넌트에 전달되는 모든 속성(데이터)이며,오직 부모 컴포넌트에서 자식 컴포넌트로 내려간다. (*props는 읽기 전용)

• <App />의 객체 속성 color와 message는 ColorMessage 컴포넌트 호출에 추가한 props.color와 props.message에 상응한다.
• 그리고 문자열 'blue'와 '잘 지내시죠?'는 prop의 값에 상응한다. React에서 컴포넌트 props는 항상 이러한 방식으로 객체에 포함된다.

children은 React 컴포넌트 태그 사이에 포함된 내용을 의미하며, 부모 컴포넌트에서 자식 컴포넌트로 HTML 요소나 다른 React 컴포넌트를 전달할 때 사용된다.

• 컴포넌트가 다양한 요소로 구성되어야 하는 경우에는 props.children을 사용하여 유연하게 컴포넌트를 구성한다.(텍스트, 이미지, 다른 컴포넌트 등)
• props.children을 사용하면 부모 컴포넌트에서 자식 컴포넌트의 내용을 자유롭게 변경할 수 있다. 이는 컴포넌트의 재사용성을 높이고, 유연성을 제공한다.

export const ColorMessage = (props) => {
    console.log('props')

    const contentStyle = {
        color : props.color,
        fontSize : '20px'
      };

    //   return <p style={contentStyle}>오랜만이죠?</p>
    return <p style={contentStyle}>{props.message}</p>
    
    return <p style={contentStyle}>{props.children}</p>

}