Component
Component를 사용 하는 이유
코드의 재사용성을 높여주고, 유지보수를 용이하게 해주며, 가독성을 높이고 모듈화된 구조를 가지므로 코드의 구성 요소를 쉽게 식별하고 이해할 수 있게 해주기 때문에
주의할 점
- 컴포넌트 네이밍 충돌 : 다른 컴포넌트에서 중복된 이름을 사용하는 것은 피해야 한다. 컴포넌트의 이름은 고유해야 하며, 네이밍 규칙을 따라야 한다.
- 상태(state)관리 : 컴포넌트의 상태를 변경할 때 주의해야 한다. 상태는 불변성을 유지하고 적절한 방법으로 업데이트 해야 한다.
사용 예시
Vue에서의 사용법과 유사하다.
- 컴포넌트 생성
- 사용 할 파일에 적용
css
- 컴포넌트의 JSX 코드 내에서 직접 스타일을 정의하는 방법
- 카멜케이스를 사용하며, 객체를 만들어 style을 지정해준다.
- CSS 파일 import하는 방법
- css파일 작성
- App.js에 적용
- CSS Modules 사용방법
- CSS파일을 모듈화하여 컴포넌트와 함께 사용하는 방법이다.
이벤트 처리
- React에서 이벤트 함수를 사용하려면 일반적으로 다음과 같은 단계를 따른다.
- 이벤트를 처리할 함수를 작성한다.
- 이 함수를 이벤트가 발생할 요소의 이벤트 핸들러에 연결한다.
여기서 주의해야 할 점은, onClick={handleClick()}가 아니라 onClick={handleClick}라는 점이다.
이는 onClick prop에 함수를 할당하는 것이고, 함수를 호출하는 것이 아니다.
이벤트 핸들러에 함수를 직접 호출하면, 컴포넌트가 렌더링될 때마다 함수가 실행되므로 원치 않는 동작을 유발할 수 있다.
Props/ 데이터 전달
- Props는 React에서 컴포넌트간에 데이터를 전달하는 방법으로, React컴포넌트에 전달되는 매개변수와 같다.
- React에서 컴포넌트는 다른 컴포넌트와 독립적으로 동작할 수 있지만, 종종 부모 컴포넌트로부터 데이터를 받아야 할 필요가 있다. 이 때 props를 사용하여 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달할 수 있다.
사용 예시
- props를 사용하여 문자열을 렌더링하는 간단한 예시
- 사용자의 데이터(이름과 사진 URL 등)를 props로 받아서 렌더링하는 예시
주의할 점
- Props는 읽기 전용이다.
React의 주요 원칙 중 하나는 props는 컴포넌트 내부에서 변경할 수 없다는 것이다.
컴포넌트는 자신에게 전달된 props를 수정하려고 시도하면 안된다.
이는 React의 "immutable props" 원칙을 따른다.
컴포넌트가 내부 상태를 가지고 있어야 한다면, 그것은 일반적으로 React의 "state" 기능을 통해 관리되어야 한다.- 이벤트핸들러는 함수를 참조해야 한다.
이벤트 핸들러로 함수를 전달할 때는 함수를 호출하지 않아야 한다.
즉, onClick={handleClick()}가 아니라 onClick={handleClick}와 같이 작성해야 한다.
함수를 직접 호출하면, 컴포넌트가 렌더링될 때마다 함수가 실행되므로 원치 않는 동작을 유발할 수 있다.
다크모드가 보기 좋아요