React를 사용하기 위해서는 react와 react-dom을 import 해주어야 한다. (최신 버전 확인하기)
ReactJS | 어플리케이션을 interactive 하도록 만들어주는 library. 일종의 엔진 역할. element를 생성하고 event listener를 더하는 것을 도와준다.
ReactDOM | library 또는 package. 모든 React element들을 HTML body에 둘 수 있도록 해준다.
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>ReactJS가 바닐라JS보다 좋은 점
ReactJS는 UI에서 바뀐 부분만 업데이트해주고 있다. 바닐라JS의 경우는 바뀐 부분을 감싸고 있는 태그까지 영향이 감 (요소 검사했을 때 안의 값이 바뀌면 연보라색으로 반짝거리는 것)
자바스크립트의 경우 노드 정보가 바뀔 때마다 노드트리를 5단계에 걸쳐서 처음부터 다시 생성한다. 하지만 리액트는 가상돔을 사용해서 사용자의 시야에 보이는 부분만 수정해서 보여주고, 모든 업데이트가 끝나면 일괄로 합쳐서 실제 돔에 던져준다. 렌더트리 단계의 최적화.
- 어려운 방법으로 React 사용하는 방법 (기억할 필요는 없고, 이해만 하면 된다. 절대 이렇게 쓸 일 없음!)
React로 element 요소를 만들 때, 반드시 HTML 태그와 똑같은 이름이어야 한다. (변수 이름은 상관없음)
<script>
const span = React.createElement("span");
</script>
만든 요소를 HTML에 배치하기 위해서 ReactDOM.render를 사용하는데, HTML에 아무런 구조도 없으 ReactDOM이 어느 부분에 요소를 배치해야 할지 알 수가 없다. 따라서 많은 사람들이 내용이 빈 div(id 혹은 class 지정)를 만들어놓고 사용한다.
render | React element를 가지고 HTML로 만들어 배치한다는 것. 사용자에게 보여준다.
<body>
<div id="root"></div>
</body>
<script>
const root = document.getElementById("root");
<!-- React.createElement의 두 번째 argument로 둘 수 있는 것은 만든 요소의 property. class나 id
세 번째 argument로 둘 수 있는 것은 만든 요소의 content-->
const span = React.createElement(
"span",
{ id: "hello-span" },
"Hello I'm a span"
);
ReactDOM.render(span, root);
</script>
이 과정을 통해서 알 수 있는 것.
바닐라JS에서는 HTML을 먼저 만들고, 그걸 Javascript로 가져와서 HTML을 수정하는 식.
ReactJS에서는 모든 것이 Javascript로 시작하고, 그다음에 HTML이 된다.
cf.) 아래 방법으로 요소를 만들 수 있다 (js의 이벤트 리스너)
<script>
const root = document.getElementById("root");
const letter = React.createElement(
"h3",
{
id: "title",
onMouseEnter: () => console.log("mouse enter"),
},
"Hello I'm a title"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("I'm clicked"),
},
"Click me"
);
const container = React.createElement("div", null, [letter, btn]);
ReactDOM.render(container, root);
</script>
JSX | JavaScript를 확장한 문법. 기본적으로 html에서 사용한 문법과 흡사한 문법을 사용해서 React 요소를 만들 수 있게 해준다.
Babel | JSX로 작성한 코드를 브라우저가 해석할 수 있게 해주는 것. 자바스크립트 컴파일러.
먼저 Babel을 사용하기 위해 script import 해주기
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
JSX로 구현하기 첫 번째 방법
Title과 Button, Container의 변수 및 기능을 각각 할당하여 렌더링 (리렌더링 기능은 구현 x)
<!-- JSX로 구현하기 첫 번째 방법 -->
<script type="text/babel"> <!-- type을 적어주지 않으면 컴퓨터에서 인식을 못함 -->
const root = document.getElementById("root");
const Title = (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
);
<!-- style은 중괄호 2개 -->
const Btn = (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("I'm clicked")}
>
Click me
</button>
);
<!-- 첫 글자가 대문자로 쓰인 것은 위에서 만든 요소들이고, 소문자는 HTML 태그이다 -->
const Container = () => (
<div>
<Title />
<Button />
<button>Hello!</button>
</div>
);
ReactDOM.render(<Container />, root);
</script>
JSX로 구현하기 두 번째 방법
따로 만들었던 title과 button의 변수를 없애고, Container에 바로 입력한다. 카운트 숫자의 변환을 위해 리렌더링까지 추가.
<!-- JSX로 구현하기 두 번째 방법 -->
<!-- countUp이라는 함수를 실행할 때마다 리렌더링 해줘야 하기 때문에 따로 함수로 만듦 -->
<script type="text/babel">
const root = document.getElementById("root");
let counter = 0;
function countUp() {
counter = counter + 1;
render();
}
function render() {
ReactDOM.render(<Container />, root);
}
const Container = () => (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
render();
</script>
JSX로 구현하기 세 번째 방법
<script type="text/babel">
const root = document.getElementById("root");
<!-- React.useState에는 두 개의 값이 할당된다. (배열, 함수) -->
<!-- setCounter 두 번째 방법이 바른 사용법 -->
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter(counter + 1);
setCounter(current + 1);
};
<!-- 간단하게 리렌더링 구현-->
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
컴포넌트의 첫 글자는 반드시 대문자여야 한다. 소문자로 작성을 하면 HTML 태그로 인식됨.
cf.) arrow function 을 사용할 때 소괄호를 쓰는 이유는 소괄호는 return 한다는 걸 전제로 하기 때문이다. 중괄호를 써도 상관은 없지만 중괄호는 return을 안 한다는 걸 전제로 하기 때문에 중괄호를 사용하려면 끝에 return을 덧붙여줘야 한다.
const [상태 값 저장 변수(array) , 상태 값 갱신 함수(modifier)] = useState(상태 초기 값);array 부분은 현재 상태 값 변수이고 상태 값을 갱신해 주는 함수(modifier)를 통해 값이 변화하는데, 변화와 동시에 새로운 값을 가지고 리렌더링이 되는 것(refresh)
state를 세팅하는 2가지 방법
- 직접 할당 | 현재 state랑 관련이 없는 값을 새로운 state로 하고 싶은 경우
- 함수 할당 | 함수의 첫 번째 인자는 현재 state. 이전 값을 이용해서 새로운 값을 현재 값으로 설정할 때.
기존에 사용했던 함수는 useState의 배열의 값을 할당한 counter를 참고했지만, current는 useState의 state 자체를 참조하기 때문에 조금 더 확실하다고(?) 할 수 있다.
'React' 카테고리의 다른 글
| Create React App (0) | 2022.11.12 |
|---|---|
| React를 사용하는 세 가지 이유 (0) | 2022.11.12 |
| Node.js와 React (유데미 한입 크기로 잘라 먹는 리액트) (0) | 2022.11.07 |
| 노마드 코더 "ReactJS로 영화 웹 서비스 만들기" 정리 3 (Props) (정리중) (0) | 2022.10.28 |
| 노마드 코더 "ReactJS로 영화 웹 서비스 만들기" 정리 2 (단위 변환 앱 만들기) ~수정중 (0) | 2022.10.26 |