[React] Start React

React

[React] Start React

파프리카_ 2023. 7. 20. 09:02

728x90

주요 공부 사항 (POINT!)

component 생명주기 흐름 이해
Hook 함수 <- 어디에 어떤 용도로 활용하는지 알아야 쓰니까
Redux 개념 알기 <- 이미 구현되어 있긴 하나 활용을 위해 필요

01_start-project (+JPX)

React Project 설치

node.js 설치
프로젝트 디렉터리로 경로 설정 후, cmd 창에 아래 명령어 수행

npx create-react-app {project_name}

설치 완료 후 프로젝트 경로로 이동해서 아래 명령어 수행

npm start

http://localhost:3000/ 에 구동된 것 확인 가능

프로젝트 simple 구조

index.js
- => npm start 시 가장 먼저 호출되는 파일
App.js
- => index.js에서 렌더링하여 호출함
index.css
index.html
- => id에 선언된 root를 index.js 에서 호출하여, 렌더링 목록의 대상이 됨

JPX (JavaScript XML)

jpx란 ?
- javascript 확장 문법
- React의 element를 생성 -> javascript로 변환되어 브라우저에 적용됨
- 화면 개발을 위해 html과 javascript를 편하게 사용할 수 있음
  - => 아래와 같이 간단하게 선언 후, react에서 부과적인 코드들을 뒷단에 추가하여 browser에 보여줌
```
function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
      <p>visible</p>
    </div>
  );
}
```

Component

React의 component는 javascript의 function이다.
component 신규 생성 순서

component 파일 생성 - html코드를 리턴하는 함수 선언, 내보내는 라인 추가

// function 선언
function ExpenseItem() {
    return <h2>Expense item!</h2>
}

// function 내보내기
export default ExpenseItem;

사용하고 싶은 파일에서 import - JSX코드에서 html 요소처럼 사용

import ExpenseItem from "./components/ExpenseItem";

function App() {
  return (
    // 루트 요소는 반드시 하나만!
    <div>
      <h2>Let's get started!</h2>
      <ExpenseItem></ExpenseItem>
    </div>
  );
}

export default App;

Props

properties의 줄임말로, component 내부 데이터를 동적으로 사용하기 위함

App.js 파일 => component를 동적 데이터를 활용해 호출하는 파일

import ComponentTest from "./components/ExpenseItem";

function App() {

  const properties = [
    {
      id : 'ID_1', name : 'NAME_1'
    },
    {
      id : 'ID_2', name : 'NAME_2'
    }
  ];

  return (
    <div>
      <h2>Let's get started!</h2>
      <ComponentTest id={properties[0].id} name={properties[0].name}></ComponentTest>
      <ComponentTest id={properties[1].id} name={properties[1].name}></ComponentTest>
    </div>
  );
}

export default App;

ComponentTest.js 파일 => component 정의 파일

import './ComponentTest.css';

function ComponentTest(props) {
  return (
    <div className="expense-item">
      <div>{props.id}</div>
      <div className="expense-item__description">
        <h2>{props.name}</h2>
      </div>
    </div>
  );
}

export default ComponentTest;

props.children

다른 컴포넌트의 하위 값들을 props.children 을 통해 호출 가능

Component1.js

import Card from './Card'

function Component1(props) {
    return (
    <Card className = "css1">
        <Component2 id={props.info.id} name={props.info.name}/>   
        <div className="css2">
            <h2>{props.title}</h2>
        </div>
    </Card>
    )
}

Card.js

function Card (props) {
    // className : 상위 component에서 사용된것 + 현재 component에서 사용된 것 같이 적용 가능
    const classes = 'card ' + props.className; 

    return (
    <div className = {classes}> // Component1에 적용되는 className은 props.css1= 'card component1'으로 두 개 적용됨
        {props.children}
        // 여기서 props.children 은 Component1의 하위 요소들을 호출들을 호출
        // props.children 
        // -> [0] : {props.info.id} {props.info.name}
        // -> [1] : <div> className ..
        // -> [2] : <h2> {props.title}
    </div>
    )
}

export default Card;

728x90