리액트 특징

리액트의 특징에 대한 설명을 ppt로 하기 전에 간단하게 정리해둔 글

 

1. class 대신 className을 사용
2. 패키지 설치 : npm install 패키지이름
3. ui 작성시  html사용 x -> jsx를 사용
4. 컴포넌트 기반 => 재사용이 가능한 컴포넌트로 분리 => 컴포넌트는 무조건 하나의 태그로 감싸줘야함

 

5. 상태관리 => useState를 사용, Redux를 사용하여 좀더 효과적인 상태관리 가능. (props의 전달 용이)
 => const [number, setNumber] = useState(기본값)
const increaseFunc = () => {
     setNumber(number + 1)
}
<button onClick={increaseFunc}>+</button>

 

6. 이벤트 처리 : 일반적으로 컴포넌트에 직접 이벤트 핸들러 추가
=> useEffect 안에서 addEventListener 사용 가능

7. 파일 구조
my-react-app/
  ├── node_modules/       # 의존성 패키지
  ├── public/            # 정적 파일 (HTML, 이미지, favicon 등)
  ├── src/               # 소스 코드
  │        ├── components/   # 컴포넌트 파일
  │       ├── pages/, styles/, utils/... 등등
  │        ├── App.js        # 주 애플리케이션 컴포넌트
  │        ├── index.js      # 애플리케이션 진입점
  ├── package.json       # 프로젝트 설정 및 의존성 목록
  ├── package-lock.json  # 패키지 의존성 버전 관리
  ├── README.md          # 프로젝트 설명과 문서8. styled-component를 사용하여 스타일 적용 => sass기반 문법, 컴포넌트 기반 스타일링/ reset같은 글로벌 스타일은 css로 적용 가능9. 백엔드는 보통 node js10. Camel Case : 컴포넌트 이름 => UpperCamelCase
props 이름, 이벤트핸들러 이름, 변수, 함수 => lowerCamelCase