[26.02.03] React 재직자 교육 3 - 에러처리 , Props(중요!!)

에러처리

not-found.js 예약어이다.

app 하위에 위치한다.

 

 

 에러처리
 404 에러처리
 잘못된라우터세그먼트로인해HTTP status가404 일경우
 app/not-found.js 컴포넌트가 렌더링됨(파일 이름이 중요)

import Link from 'next/link'
export default function NotFound() {
return (
<div className="card">
<div className="card-header">
NotFound: 404
</div>
<div className="card-body">
<h4>리소스 없음</h4>
<p>요청된 리소스를 찾을 수 없습니다.</p>
<Link href="/">홈으로 돌아가기</Link>
</div>
</div>
);
}

 

error.js

예외처리 하는 js

"use client"

import { useEffect } from "react";

function Error({error}) {
  useEffect(() => {
    console.group("[런타임 에러 내용]")
    console.log(error);
    console.groupEnd();
  }, [error])

  return (
    <div className="card">
      <div className="card-header">
        Error
      </div>
      <div className="card-body">    
        <p>런타임 오류 발생</p>
      </div>
    </div>
  );
}

export default Error;

function Exam10RuntimeError() {
  var name;

  return (

    <div className="card">
      <div className="card-header">Exam10RuntimeError</div>
      <div className="card-body">   
        이름 길이: {name.length}  
      </div>
    </div>
  );
}

export default Exam10RuntimeError;

 var name;으로 선언만 하면

dom에 그려지기 전에 name.length를 찾기때문에 런타임 오류가 뜸

 

가장 가까이있는 error.js를 찾아서 보여줌

 

Props & State

props 란?

 

 컴포넌트 태그의 속성들로 구성된 객체

 부모컴포넌트에서 생성하며 자식컴포넌트로 전달, 자식 컴포넌트는 읽기전용

 

<ChildComponent name="React" version ={19}>

<div>자식 내용입니다.</div>

</ChildComponent>

속성 이름과 값을 부모에서 보내 줄 수 있다.

 

props객체 자동 생성

{

name : "React",

version: 19,

children: “자식내용입니다.”

}

 

풀어서 쓰면

 

             //자식 컴포넌트

function ChildComponent({
name,
version=18,   ->version 속성이 주어지지 않을 경우 디폴트 값 지정
children
}) {
return (
<div className="card">
<div className="card-header">ChildComponent</div>
<div className="card-body">
<div>프레임워크: {name}</div>
<div>버전: {version}</div>
<div>버전 타입: {typeof(version)}</div>
{children}  -> "자식내용입니다" 가 들어옴...
</div>
</div>
);
}
export default ChildComponent;

 

props 세개 받음

version은 디폴트있음 나머지 없음

 

부모에서 btnHandler 함수를 onClick이라는 이름으로 자식한테 넘겨줌

 

이벤트 처리하는 컴포넌트는 클라이언트 컴포넌트 되어야 한다,.

부모 자식 모두 "use client" 추가해주기

 

예전에는 부모가 넘겨준 객체를 (props)=>{} 이런식으로 바로 받았다

그런데 지금은 안쓴다

기본값 설정 같은걸 못하기 때문이다

 

컴포넌트 상태

 

컴포넌트상태란?

 컴포넌트가 사용자와 상호작용하면서 컴포넌트 내에서 기억해야 할 값을 말함.
 상태가 변경되면 컴포넌트는 리렌더링 됨.

 

컴포넌트의 상태 특징
 상태타입– 숫자, 문자열, 객체, 배열 타입도 가능

 반드시 상태변경함수를 이용해서 상태값을 변경(직접상태값수정금지)

– 상태변경함수는 상태를 변경하고 React에게 변경을 알리는 역할을 함

 상태가 객체 및 배열일경우 깊은 복제해서 수정값으로 제공 (원본보존)

– React는 참조 비교를 통해 상태 변경을 감지하기 때문

 Setter의 비동기상태업데이트

– Setter는 비동기적으로 상태를 업데이트하므로 호출 후 바로 변경 된 상태 값을 읽을 수 없음

– 상태 변경 후 자동 콜백되는 함수를 별도로 추가 할 수 있음

 연이어 여러번Setter를 호출 할 경우 마지막 Setter만 적용

– 호출 직후 변경 된 상태값을 읽을 수 없기 때문에 여러번 실행하는 것은 의미가 없음

 연이어 여러번의 Setter를 적용하려면 Setter의 매개값으로 함수를 전달

– 전달된 함수는 순차적으로 변경된 상태값을 매개값으로 받고 실행

 

컴포넌트 상태랑 변수랑 뭐가 다를까?

어떤 컴포넌트 내에서 변수를 선언한다.

const localvar =10;

 

로컬변수 선언은 상태가 아니다.

 

상태타입

 

리액트는 이전 값(obj)을 알고있고 변경 후의 값(obj2)도 알아야된다.

그래야 비교를 해서 리랜더링을 한다.

 

구조분해할당

객체타입상태

– const [상태변수, 상태변경함수] = useState({ ... });

– 상태 변경 시 복제 객체를 생성하고 값 수정 후 제공 해야 함

 

 

useState() ;  상태 생성 및 초기화

useEffect(); 상태 변경 후 콜백되는 함수 등록

 

//상태 선언

const [number, setNumber] =useState(0); //숫자, true/false, 배열도 쓸수있고 상태의 초기값을 정한다.

0을 주면 숫자타입이 됨

setNumber => setter