React JS
2강
같은 동작 코드 비교 vanila VS React JS
vanila
<!DOCTYPE html>
<html lang="ko">
<body>
<span>Total clicks : 0</span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick() {
counter = counter + 1;
span.innerText = `Total clicks : ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>React JS
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://www.unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
onMouseEnter: () => console.log("mouse enter"),
id: "hi",
},
"Hello i am a h3"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("i am clicked"),
style: {
backgroundColor: "tomato",
},
},
"Click me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>
JSX
JSX 는 Javascript를 확장한 문법이다.
고전 React JS 1
const h3 = React.createElement(
"h3",
{
onMouseEnter: () => console.log("mouse enter"),
id: "hi",
},
"Hello i am a h3"
);JSX로 사용하는 React JS 1
const Title = (
<h3 id="title" onMouseEnter={console.log("mouse enter")}>
Hello i am a h3
</h3>
);고전 React JS 2
const btn = React.createElement(
"button",
{
onClick: () => console.log("i am clicked"),
style: {
backgroundColor: "tomato",
},
},
"Click me"
);JSX로 사용하는 React JS 2
const Button = (
<button
style={{
backgroundColor: "tomato",
}}
onClick={() => console.log("i am clicked")}
>
Click me
</button>
);babel : JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔줌
function과 const(화살표함수)
function
function Title() {
return (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello i am a title
</h3>
);
}const 화살표 함수
const Title = () => (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello i am a title
</h3>
);3.1 setState part One
let counter = 0; function countUp(){ counter = counter + 1; }이거랑
function App(){ const data = React.useState(0)l ....랑 같은 의미
const x = [1, 2, 3]와 const first = a[0]의 차이
1. 가독성:
배열의 각 요소를 변수에 할당하면, 코드가 더 가독성이 좋아집니다. 특히, 의미를 부여하는 변수 이름을 사용하면 코드가 명확해지고, 협업할 때 다른 사람들이 더 쉽게 이해할 수 있습니다.
예시:
const person = ['John', 'Doe', 30];
// 가독성 향상
const firstName = person[0];
const lastName = person[1];
const age = person[2];
console.log(firstName); // John
console.log(lastName); // Doe
console.log(age); // 30이렇게 작성하면 person[0], person[1], person[2] 대신, 각각의 값이 무엇을 의미하는지 명확히 알 수 있습니다.
2. 가독성 문제 해결 및 반복 사용 시:
배열의 요소를 여러 번 사용해야 할 경우, 매번 a[0], a[1]을 쓰는 것보다는 변수로 저장해서 사용하는 것이 더 효율적입니다.
const a = [1, 2, 3];
const first = a[0];
const second = a[1];
const third = a[2];
// 여기서 여러 번 사용 가능
console.log(first); // 1
console.log(first + second); // 3
console.log(third * 2); // 63. 편리한 디스트럭처링 할당:
ES6에서는 디스트럭처링 할당(destructuring assignment)이라는 문법을 도입했습니다. 이 문법을 사용하면 배열에서 요소를 쉽게 추출해서 변수에 할당할 수 있습니다.
const [first, second, third] = [1, 2, 3];
console.log(first); // 1
console.log(second); // 2
console.log(third); // 3이 방식은 가독성을 높이고, 코드의 길이를 줄여줍니다. 배열에서 값을 빼오는 작업을 더욱 간단하게 할 수 있습니다.
4. 함수의 반환값 처리:
함수에서 배열을 반환할 때 특정 값을 추출해야 할 경우가 있습니다. 예를 들어, 함수가 배열로 여러 값을 반환할 때, 각 값을 명확하게 분리하여 다루기 위해 const first = a[0]처럼 사용하는 경우가 많습니다.
function getCoordinates() {
return [50, 100];
}
const [x, y] = getCoordinates();
console.log(x); // 50
console.log(y); // 100요약:
- 가독성: 변수에 의미 있는 이름을 붙이면 코드가 더 명확해집니다.
- 반복 사용: 배열의 요소를 여러 번 사용해야 할 때, 변수에 저장하면 더 편리하고 효율적입니다.
- 디스트럭처링 할당: ES6의 디스트럭처링을 사용하면 배열 요소를 쉽게 변수로 분리할 수 있습니다.
- 함수 반환값 처리: 함수에서 배열로 여러 값을 반환할 때, 필요한 값만 쉽게 추출하여 사용할 수 있습니다.
다른예시
const x = [1, 2, 3] // undefined
const [a, b, c] = x; // undefined
a // 1
b // 2
c // 3
modifier ( = setCounter )
function App() {
const [counter, modifier] = React.useState(0);
const onClick = () => {
modifier(1004);
};
// ~~ code ~~여기서
modifier(1004)는counter = 1004; ReactDOM.render(<App />, root); // 리렌더링이 두가지 코드를 내포하고 있다.
3.4 State Functions
(current) => current + 1) 이렇게 코드를 만들면 다음 state값이 현재 값을 바탕으로 나올 수 있다.
setCounter(counter + 1);
// 는 아래 코드와 같다.
setCounter((current) => current + 1);
current는 자바스크립트에서 정해진 메서드나 용어가 아닙니다. 즉, 이는 임의의 변수명으로, 원하는 이름으로 변경할 수 있습니다.코드에서
setCounter는 상태 업데이트 함수로 보입니다. React의useState에서 사용하는 패턴입니다.setCounter((current) => current + 1);이 코드는 이전 상태값을 받아서 그 값을 기반으로 새로운 값을 설정하는 방식입니다.
current는 여기서 현재 상태값을 나타내기 위해 임의로 설정한 이름일 뿐입니다. 이 변수는 이전 상태값을 나타내므로, 원하는 이름으로 자유롭게 변경할 수 있습니다.예를 들어, 아래와 같이 바꿀 수 있습니다:
const onClick = () => { setCounter((prevValue) => prevValue + 1); };혹은 다른 이름으로도:
const onClick = () => { setCounter((counterState) => counterState + 1); };결론:
current는 자바스크립트에서 특별히 정해진 이름이 아니며, 당신이 원하는 다른 이름으로 변경할 수 있습니다.- 중요한 것은 이전 상태값을 받아서 처리하는 함수라는 점입니다. 이 함수의 매개변수 이름은 자유롭게 바꿀 수 있습니다.
