리액트(react)
프론트앤드 개발을 위한 JavaScript오픈소스 라이브러리
- 리액트의 3가지 특징
선언형, 컴포넌트 기반, 범용성
- 선언형
한 페이지를 HTML/CSS/JS로 안나누고 JSX를 활용해 하나의 페이지로 명시적으로 작성 가능
JSX : HTML, CSS, 를 결합한 문법
- 컴포넌트 기반
하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트 기반 개발
컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하여 기능 자체에 집중하여 개발 가능
=> 코드만 보고 앱을 파악 가능
- 범용성
리액트는 자바스크립트 라이브러리에 있기 때문에 기존 자바스크립트 프레임워크로 제작된 내용에 리액트를 추가할 수 있다.
페이스북에서 관리해서 안정적이다. 리액트 네이티브를 사용하면 모바일 개발도 가능
- JSX
JSX는 자바스크립트를 확장한 문법으로 자바스크립트 런타임 환경에서 바로 실행할 수 없다.
이걸 JS로 변환해 주는 것이 ‘Babel’이다.
JSX를 Babel을 이용해 JS로 컴파일하면 브라우저가 읽고 화면에 렌더링 할 수있다.
HTML/CSS/JS로 구성되던 코드를 CSS/JSX로 구성할 수 있다고 볼 수있다. 구조와 작동은 연관성이 크기 때문에 바로 보는 것이 편하다.(굳이 서로의 정보를 가져오기 위해
- JSX 문법
- 하나의 엘리먼트 안에 모든 엘리먼트를 포함시켜야 함(모든걸 둘러싸는 엘리먼트 필요)
- calssName (JSclass) 클래스지정시 이용 (JS 와의 혼선 때문)
- 자바스크립트 표현식은 {} 이용 변수명 불러오기 등
- 사용자 정의 컴포넌트는 대문자로 시작
- 조건부 렌더링에는 삼항연산자 사용
- HTMLarray.map() 여러 개의 엘리먼트 표현 시 함수 사용
- 컴포넌트 하나의 기능 구현을 위한 여러개의 코드묶음
컴포넌트를 여러개 만들고 조합하면 어플리케이션을 만들 수 있다.
컴포넌트는 어플 내부에서 루트의 역할을 하고 자식 컴포넌트를 가질 수 있다.
- Create React App
SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인
BABEL, jest, host css 등등등 을 create react app 명령어로 한방에 엮어준다.
npx create-react-app 폴더명
설치하는 패키지 : react, react-dom, react-scripts, cra-template 등
렌더링 방식
states, props
일반적으로 HTMl을 렌더링 하기 위해서는 DOM element에 접근하여 내용을 바꾸고 렌더링 하는 과정이 필요하다. 그런데 react에서는 값이 바뀌면 자동으로 렌더링이 일어나게 하는 states라는 것을 만들어 이용한다.
const [states, setStates] = useState('init')과 같은 형태로 간단하게 선언하여 사용할 수 있ek.
useState함수를 사용하면 위와 같이 states와 그걸 변경할 수 있는 함수가 배열에 담겨서 선언되는데 이때 생성되는 함수를 이용해서만 states를 변경해야 한다. 안그러면 예기치 못한 사태가 벌어질 수도 있다.
또한 states를 이용해서 렌더링을 하기 때문에 한 컴포넌트 안에서 선언된 states를 다른 컴포넌트에서 사용하고 싶을 때가 있다. 그럴때는 props 문법을 이용한다.
그런데 react는 데이터의 흐름이 하향식으로 작성하도록 되어 있기 때문에 부모컴포넌트에서 자식 컴포넌트로만 props를 내려줄 수 있다.
