React에서 스타일드 컴포넌트, 연산자, HTML 속성, 라우팅 등...

과제를 하며 알게 된 부분, 궁금했던 부분 몇 가지.

스타일드 컴포넌트에서 $는 언제 붙이나?

:$는 주로 스타일드 컴포넌트에 전달되는 사용자가 정의한 커스텀 프롭(속성) 이름을 정의할 때 사용된다. 프롭 이름은 일반적으로  camelCase로 정의하고 스타일 안에서 사용할 때 $를 붙인다.

?? 와!! 의 의미

?? 는 널 병합 연산자로 a?? b는 a가 null 또는 undefined일 경우에만 b로 대체된다. 그렇지 않으면 a의 값이 그대로 사용됩니다. 이 연산자는 주로 변수 또는 속성의 값이 정의되지 않았거나 null인 경우에 대체값을 지정할 때 사용된다.
!! 는 값을 불리언으로 변환하는 용도로 사용된다. 이 연산자는 값을 불리언으로 강제 형변환하고, 해당 값이 참인지 거짓인지를 확인한다.
 이는 값이 존재하면 true로, 없으면 false로 변환된다.

disabled 속성

disabled 속성은 HTML 요소에서 사용되며 해당 요소를 사용자 상호 작용에서 비활성화한다. 비활성화된 요소는 사용자에게 편집이나 선택이 불가능하다는 시각적인 표시를 제공하며, 주로 폼 요소, 버튼, 입력 필드 등에서 사용된다. disabled 속성이 true로 설정되면 해당 요소가 비활성화된다.

disabled의 속성은 생략 가능한데, 생략 시 true로 간주한다.
특정 HTML요소를 비활성하기 위해서는 disabled을 추가하거나 추가하지 않음으로써 활성화 상태를 조정할 수 있다.
disabled 속성이 존재하지 않거나(HTML요소에 아예 disabled속성을 넣지 않음), disabled 속성의 값이 없는 경우(disabled={true}에서 true 생략하여 disabled만 표기)에는 해당 요소가 활성화된 상태로 간주된다.

navigate와 Link의 차이

Link: 사용자가 클릭하면 다른 경로로 이동하는 데 사용되는 React Router의 컴포넌트. HTML의 <a> 태그와 비슷하지만 페이지를 새로고침하지 않고 라우팅을 처리한다.
navigate: React Router의 useNavigate 훅을 통해 얻는 함수로, 프로그래밍적으로 특정 경로로 이동할 때 사용된다. 코드가 실행되는 런타임 환경에서 경로 이동시 사용할 수 있다.