[React] Start React

주요 공부 사항 (POINT!)

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

---

01_start-project (+JPX)

React Project 설치

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

npx create-react-app {project_name}

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

npm start

4. 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;

  2. 사용하고 싶은 파일에서 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;