[React] React 기초

컴포넌트 생성

 

<스니펫 단축키>

rsf: 함수선언문 컴포넌트

rsc: 함수표현식 컴포넌트

 

컴포넌트명의 첫 글자는 반드시 대문자로 작성해야 컴포넌트로 인식한다.

 

<기본 구조>

// 함수표현식 컴포넌트
const 컴포넌트명 = () => {
  return (
	<> // fragment
    /*
    여기 작성되는 내용은 JSX로 화면에 보이는 영역
    개발을 쉽게 하기 위해 태그 형식으로 사용하나 html과 달리 태그가 아님
    */
    </>
  )
}
export default 컴포넌트명;

// ---------------------------------------------------

//함수선언문 컴포넌트
function 컴포넌트명(props) {
  return (
    <div>
      
    </div>
  );
}

export default 컴포넌트명;

 

import 파일 연결

컴포넌트 포함 .js, .jsx, .css, .png, .svg, ... 등의 파일을 연결할 때 import를 사용하며

 

컴포넌트를 부모 컴포넌트에 연결할 때는 JSX 작성과 import 연결을 둘 다 작성해야 한다.

import "./assets/css/reset.css";
import Ex1_props from "./component/Ex1_props";

function App() {
  return (
    <>
      <Ex1_props />
    </>
  );
}

export default App;

 

JSX 영역

컴포넌트 내부에 JSX 방식으로 작성된 코드들이 화면에 보이는 영역.개발을 쉽게 하기 위해 HTML과 비슷한 태그 형식으로 작성하나 태그와는 다르다.

 

function Ex1_props(props) {
  return (
    <div>
      <h1>JSX영역</h1>
      <h2>
        컴포넌트 내부에 JSX 방식으로 작성된 코드들이 화면에 보이는 영역.
        개발을 쉽게 하기 위해 HTML과 비슷한 태그형식으로 작성하나 태그와는 다르다.
      </h2>
    </div>
  );
}
export default Ex1_props;

 

props

컴포넌트의 정보를 담은 속성으로 부모 -> 자식에게 데이터가 흐르며 컴포넌트의 매개변수에 객체 형태로 전달된다.

function Coffee(props) { // props에 객체형태로 {name="아메리카노" price="4000원"} 전달.
  return (
    <div>
      <h2>{props.name} : {props.price}</h2> // 점 표기법으로 호출 후 h2에 출력
    </div>
  );
}

function Ex1_props(props) {
  return (
    <div style={{border: "1px solid #000", width: "70vw"}}>
      <h1>props</h1>
      <Coffee name="아메리카노" price="4000원"/>
    </div>
  );
}


export default Ex1_props;

 

매개변수로 전달되는 객체는 구조 분해 할당을 통해 사용할 수 있으며 실제로 보편적으로 사용되는 방식.

 

function Coffee1(coffee) {
  const {name, price} = coffee
  return (
    <div>
      <h2>{name} : {price}</h2>
    </div>
  );
}
function Coffee2({name, price}) {
  return (
    <div>
      <h2>{name} : {price}</h2>
    </div>
  );
}
function Ex1_props(props) {
  return (
    <div style={{border: "1px solid #000", width: "70vw"}}>
      <h1>props</h1>
      <Coffee1 name="바닐라라떼" price="4500원"/>
      <Coffee2 name="카페라떼" price="5000원"/>
    </div>
  );
}
export default Ex1_props;

 

props 속성을 인용부호로 감싸면 문자열로 전달되는데

중괄호로 감싸 자바스크립트로 작성할 수도 있다. 이 경우 해당 데이터형을 그대로 전달한다.

 

import Ex2Sub from "./Ex2Sub";

function Ex2() {
  const latte = {name:"카페라떼", price: "4500"}
  const mocha = {name:"카페모카", price: "5000"}
  const {name, price} = mocha

  return (
    <div>
      <h1>props</h1>
      {/* Ex2Sub 컴포넌트에 속성(props) 전달 */}
      <Ex2Sub name="아메리카노" price="4000"/>
      <Ex2Sub name="아메리카노" price={4000}/>
      <Ex2Sub name={latte.name} price={latte.price}/>
      <Ex2Sub name={name} price={price}/>
      <Ex2Sub {...latte} />
      <Ex2Sub {...mocha} />
    </div>
  );
}
export default Ex2;
export default Ex2;

// ----------------------- 자식 컴포넌트

function Ex2Sub({ name, price }) {
  return (
    <>
      <h2>Ex2 자식 컴포넌트</h2>
      <p>
        커피: {name} / ({typeof name})
      </p>
      <p>
        가격: {price} / ({typeof price})

      </p>
    </>
  );
}
export default Ex2Sub;

 

props는 부모 요소에서 값을 전달받아 사용하지만, 자식 컴포넌트의 기본 props 값을 정해줄 수도 있다.

 

자식컴포넌트.defaultProps = { props키 : 초기값}

// 초기값 설정. 선택 사항
Try1Sub.defaultProps = {
  name: "기본값",
  email: "기본값",
  tel: "기본값",
  color: "기본값",
  bgcolor: "기본값",
  done: true,
};