[React] 템플릿 언어 (1)

템플릿 언어

 

 

장고 프레임워크에서 파이썬 변수 및 문법을 html 안에서 쓸 수 있도록 장고에서 제공해주는 언어이다.

 

JSX (JavaScript XML)

 

리액트에서 사용하는 자바스크립트를 확장한 언어이다. HTML 태그와 컴포넌트로 컴포넌트의 구조를 표현한다. 중괄호 ({,})에 자바스크립 표현식을 사용할 수 있다. HTML과 다르게 클래스 적용을 위해서는 className을 사용해야 한다. 컴포넌트는 반드시 루트 요소 하나를 반환해야 한다.

 

훅 (Hook)

 

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다. 컴포넌트 코드를 간단하게 해준다.

 

useState	상태 훅을 위한 함수. 함수 컴포넌트가 상태를 가질 수 있도록 한다.
useEffect	이펙트 훅을 위한 함수. 특정 상태값에 따른 동작을 정희할 수 있게 해준다.

 

라우터 (Router)

 

Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해준다. SPA 내에서 URL로 페이지 전환을 가능하게 한다.

 

npm install react-router-dom@6

Link 컴포넌트 앵커 태그 (a)의 기능을 하는 컴포넌트 useNavigate을 사용하여 특정 URL로 이동할 수 있다. useParams로 URL에 전달된 매개 변수를 전달받을 수 있다.

프로젝트에 필요한 페이지

404 로그인 회원가입 비밀번호 찾기 세팅 메인 프로필 테스트

 

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리