React JS: UI를 interative(상호작용)하게 만들어줌
* React 대표적인 특징 3가지
1. JSX 문법
2. Component 기반
3. Virtual DOM
<React js 사용X - vanilla js>
<React js>
- element 생성 방법
1.
const span = React.createElement("span",{ID:"sexy-span"}, "Hello I'm a span");
//2번째 인수: span의 property, 3번째 인수: span의 내용 -> 잘 사용 안함(너무 어렵)
1) React JS: 엔진, UI를 interative하게 만들어줌
2) react-dom: react element를 HTML에 두는 역할
- render: react element를 가지고 html로 만들어 배치 -> 사용자에게 보여줌
- 렌더링: html요소 또는 react요소 등의 코드가 눈에 볼 수 있도록 그려지는 것
2. JSX
- 자바스크립트를 확장한 문서
- HTML에서 사용한 문법과 비슷한 문법 사용
- Babel: 코드를 변환해줌, jsx로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꾸어줌
- 컴포넌트의 첫 글자는 반드시 대문자: jsx에서는 그냥 태그가 되어버림
- 함수 만드는 방법:
1) function 함수명(){
return(~~~~);
}
2) 함수명 = () => (~~~)
**오류 부분
1 (컴포넌트 X) : ReactDOM.render(Container , root);
2 (컴포넌트O) : ReactDOM.render(<Container />, root); <- 이 코드 적용해야 실행됨
- State: 데이터가 저장되는 곳 -> 값이 바뀔때마다 데이터를 담아줌
- modifier함수: 값을 받아 업데이트하고 리렌더링해줌 -> modifier(값)
- modifier함수를 가지고 state를 변경할 때, 컴포넌트가 재생성됨 -> 새로운 값을 가지고 리렌더링되는 것
앱의 state를 바꾸는 방법: 현재 state를 이용해 다음 state의 값 계산해냄
1) setCounter를 이용해 우리가 원하는 값 넘김
2) 이전 값 이용해 다음 값 알아내는 것
//setCounter(counter+1);
setCounter((current) => current+1);
-> 둘 코드는 이전 값을 이용해 다음 값을 알아내는 것이다: 아래 코드가 더 안전!
[JSX사용 시 주의할점]
- class 사용하면 안됨 ->className
- for사용 X -> htmlFor
- input: uncontrolled -> input의 value를 통제할 수없음
- flipped: true 혹은 false
Props: 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법
-> btn이 받는 유일한 인자
Prop Types: prop들의 타입 확인 -> 경고를 확인하기 위해(어떤 prop들을 받는지 검사)
* prop을 전달할 때의 이름과 받아서 사용할 때의 이름이 동일해야함
create-react-app:리액트 어플리케이션을 만드는 최고의 방식
- 많은 스크립트, 사전설정들 존재
