순수 JavaScript를 이용해서 웹 페이지를 개발해오다가
부동산 권리금 플랫폼과 자취방 후기 서비스를 개발할 때 React를 사용하기 시작했는데요.
그럼 React는 무엇이고 어떤 특징을 가지고 있는지 확인해볼까요?
React는 JavaScript 라이브러리 중 하나로
사용자 인터페이스를 만들기 위한 컴포넌트 기반의 라이브러리입니다.
React는 UI를 작은 독립적인 조각으로 나누어 개발하고, 이러한 조각을 조합하여 복잡한 UI를 구축할 수 있습니다.
React의 핵심 개념은 다음과 같습니다.
1) 컴포넌트(Component)
UI를 작은 독립적인 조각으로 분해한 것입니다.
각 컴포넌트는 자체적으로 상태(state)와 속성(props)을 가질 수 있습니다.
state는 컴포넌트의 속성값을 저장, 읽기, 수정가능한 객체
props (Properties)는 부모에서 자식으로 전달되는 읽기 전용 속성
2) 가상 돔(Virtual DOM)
React는 가상 DOM을 사용하여 성능을 최적화합니다.
변경 사항이 발생할 때마다 전체 DOM을 다시 그리는 대신, 가상 DOM을 사용하여 실제 DOM과의 차이점을 찾아내고 효율적으로 업데이트합니다.
3)JSX (JavaScript XML)
React에서 UI를 작성하기 위한 문법 확장입니다. JSX를 사용하면 JavaScript 코드 안에 마크업을 작성할 수 있습니다.
4)단방향 데이터 흐름(Unidirectional Data Flow)
React에서 데이터는 항상 위에서 아래로 흐릅니다.
부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터가 전달되며, 자식 컴포넌트에서는 상태를 변경할 수 없습니다.
React Hooks (React 16.8 이상)
함수형 컴포넌트에서 클래스형 컴포넌트 기능 사용할 수 있도록 해주는 기술
1) useState - 상태 관리 용도
2) useEffect - side effect 수행 용도
3) useMemo - 정보 캐싱 용도
4) useContext - context 값을 가져오는 용도