주요 개념 이것저것 기록하기(1)

ParseInt vs Number

Number가 parseInt보다 엄격함

비교 항목	parseInt	Number
공백 허용	O	X
숫자+문자열 인식	O	X
문자열+숫자 인식	X	X

// parseInt
parseInt("10.33");		// 10
parseInt("10, 33");		// 10
parseInt("10 20 30");	// 10
parseInt("10 years");	// 10
parseInt("Year 10");	// NaN

// Number
Number("10.33");		// 10.33
Number("10, 33");		// NaN
Number("10 20 30");		// NaN
Number("10 years");		// NaN
Number("Year 10");		// NaN

---

for...in vs for...of

• 배열에서의 for...in : 인덱스(index)를 return함
• 배열에서의 for...of : 요소의 값(value)을 return함

---

주요 HTTP 요청 메서드

메서드	설명
GET	데이터를 가져옴
POST	데이터를 제출(추가)함
PUT	데이터를 요청한 payload로 덮어씀
PATCH	데이터에서 payload에 해당하는 부분만 수정함
DELETE	데이터를 삭제함

• PUT vs PATCH
  • PUT : 기존의 값을 payload로 덮어씀
  • PATCH : 기존 값에서 payload에 해당하는 부분만 수정함

---

React-Router-DOM의 컴포넌트 & Hook (추가)

컴포넌트

1. Link

• HTML의 a 태그와 동일한 역할을 수행함
• 특정 주소와 일치하는 컴포넌트로 이동함

<Link to='링크명'>표시할 내용</Link>

2. NavLink

• 현재 경로와 일치하는 컴포넌트에 스타일 or 클래스를 적용할 수 있음

<NavLink to='링크명' activeClassName="active">표시할 내용</NavLink>

3. outlet

중첩 라우팅
: 라우팅을 중첩시키는 것

<Route path='/' element={<Home />} >
  <Route path="page1" element={<Page1 />} />
  <Route path="page2" element={<Page2 />} />
</Route>

이를 활용하여 자식 컴포넌트에 공통된 레이아웃아나 조건을 적용하여 렌더링할 수 있음

• outlet: 위 예시에서 자식 컴포넌트를 포함하는 부모 컴포넌트 (ex. <Home />)

  function Home() {
    return (
      <div>
        <header>Header</header>
        <main>
          <Outlet />
        </main>
        <footer>Footer</footer>
      </div> 
    );
  }

Hook

1. useParams

• 주소에 입력한 매개변수 정보를 출력함 (/user/:userId 의 :userId 부분)

2. useSearchParams

• 주소에 입력한 쿼리 매개변수 정보를 출력함 (/user?id=1234 의 ?id=1234 부분)

---

[240208, 240213] React 수준별 수업 의 내용을 정리한 글입니다.