[문법] 컴포넌트와 props

컴포넌트

길어지는 html을 간략하게 사용할 수 있는 것
1. 반복 적인 것
2. 페이지 여러개가 있을 경우 개별 페이지
3. 자주 변경되는 ui

• 위치: 함수 바깥에 별도 함수로 작성
• 첫시작은 대문자 파스칼케이스
• return()으로 시작하여 꼭 하나의 태그로 감싸져 있어야 함

Props

• React 컴포넌트 간 데이터를 전달하기 위해 사용
• 읽기 전용 객체
• 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용
• 상태를 변경하려면 state를 사용
• Props로 전달되는 값은 문자열, 숫자, 배열, 객체, 함수 등 어떤 데이터 타입도 가능

import { useState } from 'react'

function App() {
  let [나이, 나이변경] = useState([
      ['민수', 20],
      ['영희', 32],
      ['순신', 5],
      ['맹구', 1],
  ]);

  return (
    <>
      <div className="test">
        <button onClick={() => {
          let name = [...나이];
          name.sort((a, b) => a[0].localeCompare(b[0])); // 이름 기준으로 가나다순 정렬
          // name.sort((a, b) => b[0].localeCompare(a[0])); // 이름 기준으로 가나다순 내림차순 정렬
          나이변경(name);
        }}>이름 정렬</button>

        <button onClick={() => {
          let age = [...나이];
          age.sort((a, b) => a[1] - b[1]); // 나이 기준으로 오름차순 정렬
          // age.sort((a, b) => b[1] - a[1]); // 나이 기준으로 내림차순 정렬
          나이변경(age);
        }}>나이 정렬</button>

        <ul>
          <li>{나이[0][0]}: {나이[0][1]}</li>
          <li>{나이[1][0]}: {나이[1][1]}</li>
          <li>{나이[2][0]}: {나이[2][1]}</li>
          <li>{나이[3][0]}: {나이[3][1]}</li>

          <Li a={0} b={0} c={1} 나이={나이}/>
          <Li a={1} b={0} c={1} 나이={나이}/>
          <Li a={2} b={0} c={1} 나이={나이}/>
          <Li a={3} b={0} c={1} 나이={나이}/>
        </ul>
      </div>
    </>
  )
}

function Li({a,b,c,나이}){
  return(
    <>
      <li>{나이[a][b]} : {나이[a][c]}</li>
    </>
  )
}

 
 

Props vs State

목적	부모에서 자식으로 데이터 전달	컴포넌트 내부 데이터 관리
변경 가능 여부	읽기 전용	변경 가능
어디서 관리	부모 컴포넌트	해당 컴포넌트 내부
데이터 흐름	단방향(부모 -> 자식)	컴포넌트 자체에서 관리