컴포넌트화의 기초 props 사용

props

기존의 페이지 노가다에서 멈춰 있던 javascript에서 우리를 대컴포넌트의 시대에 올라탈 수 있게 해 준 react를 현명하게 쓰기 위한 첫 발걸음.
props 원본은 src 폴더에 따로 지정한다.

개념적으로 컴포넌트는 JavaScript 함수와 유사합니다.
“props”라고 하는 임의의 입력을 받은 후,
화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.
-리엑트 공식문서

react에서 Components와 Props는 때려야 땔 수 없는 관계이다. props는 우리가 잘 아는 프로퍼티"prooerties"의 줄임말이다.키 값 쌍의 데이터로서 특정 컴포넌트의 속성이나 설정값을 전달하는 데 사용되며, 동적인 데이터를 다룰 수 있다.

- 읽기 전용
- 부모 컴포넌트 -> 자식 컴포넌트 단방향 전달 형태
- 자식 컴포넌트에서 내용 변경 불가
- 자식 컴포넌트에서 전달 받은 데이터 형태는 *props 객체* 
- 객체는 키-값 쌍으로 이루어진 데이터 구조 
- react의 프로퍼티(Props)는 객체에서 키(value)를 담당.
- 즉 부모에서 자식으로 데이터 전달할 때의 식별자 역할 

1. React 컴포넌트에서 props는 함수형 컴포넌트의 매개변수로 전달되거나,
2. 클래스형 컴포넌트의 this.props로 접근할 수 있다.

현 페이지의 코드는 함수형 컴포넌트의 매개변수로서 props를 사용한다.
isEdit이란 속성을 props를 통해 받아와 사용한다.

2번의 경우 클래스형 컴포넌트 내부(자체)에서 본인의 props에 접근하기 위해 this.props를 사용한다.

컴포넌트

컴포넌트 기반
스스로 상태를 관리하는 캡슐화된 컴포넌트를 만드세요. 그리고 이를 조합해 복잡한 UI를 만들어보세요.

컴포넌트 로직은 템플릿이 아닌 JavaScript로 작성됩니다. 따라서 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있습니다.

src 폴더

UI 구현과 기본 react 구조는 pages에, 컴포넌트 본체는 src에 넣었다.

props 사용 예제 코드

게시글 수정하기와 게시글 작성하기 페이지를 컴포넌트를 재사용해 만든 코드.

//src 컴포넌트 재사용화
export default function BoardComponent(props) {
  return (
    <div>
      <h1>{props.isEdit ? "수정" : "등록"}페이지</h1>
      제목:
      <input type="text" />
      <br />
      작성자:
      <input type="text" />
      <br />
      내용:
      <input type="text" />
      <br />
      <button>{props.isEdit ? "수정" : "등록"}하기</button>
    </div>
  );
}

/*컴포넌트 부품 하나를 <></>로만 묶으면 안돼는 이유? 
예) A파일로 import시 <></>를 제외한 내부 내용만 옮겨간다. 
이때 기존의 CSS는 무시하고 A파일에 있던 CSS를 덮어쓰게 된다 
(CSS 충돌)을 방지하기 위해 컴포넌트에는 가급적 벽을 쳐서 구간을 나눈다. 
*/

//edit.index

import BoardComponent from
"@/src/components/units/board/09-board-component";

export default function BoardEditPage() {
  return <BoardComponent isEdit={true} />;
}

//new.index
import { Fragment } from "react";

import BoardComponent from 
"../../../src/components/units/board/09-board-component";

export default function BoardNewPage() {
  return <BoardComponent isEdit={false} />;
//특별히 키가 필요없으면 fragment를 생략, 빈 마크업만 작성한다.}

//name="수정" , "작성" 보다 나은 방법.