REACT <Props, Route, Rendering, Handler>

Props 전달

• 부모 컴포넌트로 부터 자식 컴포넌트로 데이터를 전달할 때 사용
• props로 전달된 데이터는 자식 컴포넌트에서 readonly!처럼 사용(변경 불가)

✔️부모 컴포넌트

export default function Props01() {
  const props = {
    colorProps: 'orange',
    name: '이민영'
  }

  return (
    <div>
     
    </div>
  )
}

• 먼저 props값에 name, colorProps에 속성값을 넣는다. 이 값은 고정돼 자식
• 컴포넌트에 전달되면 readonly처럼 사용하게 되 변경이 불가하다.
• ...props가 구조 분해 할당을 사용하여 각각의 속성명을 찾아감 

 

function ChildComponent(props: { name: string }) {
  // props.name = '이도경'; - Error (readonly 속성)
  return (
    <div>안녕하세요. {props.name}</div>
  )
}

• ChildComponenet 컴포넌트에 매개 값에 props에 name속성은 String만 올수있다.
• props.name에 이도경을 할당하려하지만 부모컴포넌트에서 값이 고정돼 readonly속성이되 error가 발생한다.

 

✅여러개의 Props 전달과 비구조화 할당(구조분해)

• 객체나 배열에서 해당 묶음 구조를풀이해서 작성
  >> 객체나 배열  내부의 요소들을 한번에 각각의 요소의 변수에 할당

type MultiPropsType = {
  name: string;
  colorProps: string;
}

function MultiProps({ name, colorProps }: MultiPropsType) {
  return (
    <div style={{ color: colorProps}}>반갑습니다. {name}님</div>
  )
}

 

• {name, color}: MultiPropsType
  좌항의 name과 color는 함수 내부의 로컬 매개변수
• 우항의 객체 구조는 외부에서 전달하는 인자값(객체, 배열)

MultiProps.defaultProps = {
  name: '황사민'
}

기본 속성값 지정

• 컴포넌트 호출 시 props를 전달하지 않을 경우 지정될 기본값
• 컴포넌트명.defaultProps = { 기본속성: '기본값' }

<결과>

---

리액트 라우터(React Router)

✅ 라우터(Router)

• 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것
•  react-router-dom 패키지(외부 라이브러리)를 사용하여 라우팅을 구현

✅ 리액트 라우터 설치 방법
: npm install react-router-dom
: npm i react-router-dom

를 콘솔창에 입력하면 package.json에 react-router-dom이 생성 된다

 

프로젝트에 라우터 기능을 적용

• 프로젝트 최상단인 src/index.tsx 파일에서
    BrowserRouter를 적용 
• 자식 컴포넌트들이 라우팅 기능을 사용할 수 있도록 작성

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);

 

Routes

• 여러 개의 Route를 담을 수 있는 컴포넌트
    >> 여러 개의 Route 중 각각의 path(경로)에 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할

Route

function index() {
  return (
    <div> 
    <Routes>
        <Route path='example01' element={<Example01 />}/>
    </Routes>
    </div>
  )
}

export default index

• path는 경로를 뜻하며 element는 Route로 출력할 컴포넌트를 기입해서 사용한다.

---

Redering

작성한 코드를 화면에 출력하는 기능 >> 조건부 렌더링

 

<예시>

interface IItem {
  name: string;
  isPacked: boolean;
}

여행짐싸기 >> 짐 항목의 이름, 준비 완료 여부

짐을 챙겼을 경우(true), 아직 안채겼을 경우 (false)를 출력한다.

<자식 컴포넌트>

function Item({ name, isPacked }: IItem) {  
    return (
        <li>
          {/*  
            논리 연산자
            && 연산자 (a && b: 둘다 true 여야만 true값이 반환)

            A && B
            - A의 값이 false인 경우 B의 값 출력 (X)
            - A의 값이 true인 경우 B의 값 출력 (O)
          */}
          {name} {isPacked && '✔'}
        </li>
      )
}

<부모 컴포넌트>

export default function Rendering01() {
  return (
    <div>
      <p>여행용 짐 목록</p>
      <ul>
        <Item 
          name='과자'
          isPacked={true}
        />
        <Item 
          name='김밥'
          isPacked={false}
        />
        <Item 
          name='음료수'
          isPacked={true}
        />      
      </ul>
    </div>
  )
}

Item name 물건이름을 전달, isPacked는 true|false값을 지정해서 전달한다.

김밥은 false값이 들어가서 체크표시 없이 출력된다.

 

<결과>

---

배열(List)렌더링

<예시>

export default function Rendering02() {
  const people = ['이승아', '이도경', '윤대휘', '정규민', '김소빈'];

상수 people에 배열값을 할당한다.

const peopleDescription = [
    {
      id: 0,
      name: '이승아',
      job: 'developer'
    },
    {
      id: 1,
      name: '이도경',
      job: 'operation'
    },
    {
      id: 2,
      name: '윤대휘',
      job: 'business'
    },
    {
      id: 3,
      name: '정규민',
      job: 'business'
    },
    {
      id: 4,
      name: '김소빈',
      job: 'operation'
    },

peopleDescription 상수에는 id, name, job값을 포함한 배열을 할당한다.

const listItems = people.map((person, index) => {
		return <li key={index}>{person}</li>
  });

map 콜백함수를 사용한 배열 렌더링 >> 요소 개수의 변화 X
 : 전체 내용을 렌더링

배열을 렌더링하여 HTML 요소로 반환할 경우
: 각 요소를 구분할 수 있는 구분값을

key 속성에 전달!

<결과>

---

Handler

• 사용자와의 상호작용을 처리하기 위한 함수
• UI(사용자 인터페이스)에서 발생하는 이벤트에 반응하여
    , 동작되는 기능을 정의

<예시- 이벤트 핸들러에 데이터 전달>

interface ConsoleProps {
  message: string;
  children: React.ReactNode; // HTML 요소 + 사용자 정의 컴포넌트
}

• React.ReactNode는 HTML요소를 포함 

<자식컴포넌트>

function ConsoleButton({ message, children } : ConsoleProps) {
  // const message = 'A를 동작';
  
  return (
    <button onClick={() => { console.log(`${message}`); }}>
      {children}
    </button>
  )
}

• 부모 컴포넌트에서 속성으로 문자열 message의 값과 해당 컴포넌트 태그들 사이에 내용을 전달 받음

<부모컴포넌트>

export default function Handler01() {
  function handleButtonClick() {
    console.log('버튼을 클릭하였습니다.');
  }
  return (
    <div>
      {/* 
        버튼 요소에 이벤트 등록 
        >> prop에 이벤트를 '전달'
        >> on속성으로 작성 
          - 속성의 중괄호 내에 JS 기능을 명시 (이벤트 핸들러)

        +) 이벤트 핸들러의 함수는 호출 X, 등록되어야 한다.
      */}
      <button onClick={handleButtonClick}>클릭</button>

      <button onClick={function() {
        console.log('버튼 클릭2');
      }}>클릭2</button>

      <button onClick={() => {
        console.log('버튼 클릭3');
      }}>클릭3</button>

      {/* 핸들러에 데이터 전달 */}
      <ConsoleButton message='A를 동작'>
        {/* ReactNode를 전달 할 경우 HTML 요소의 '내용' 전달 가능 */}
        A를 동작시키는 버튼
      </ConsoleButton>
      <ConsoleButton message='B를 동작'>
        {/* ReactNode를 전달 할 경우 HTML 요소의 '내용' 전달 가능 */}
        B를 동작시키는 버튼
      </ConsoleButton>
    </div>
  )
}

• 버튼을 클릭하면 이벤트 값이 전달되어 콘솔창에 출력된다.