초급자를 위한 기초 강의~
1. React 소개
React는 Facebook에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 만들기 위한 도구입니다. React는 컴포넌트 기반 아키텍처를 사용하며, 이를 통해 재사용 가능한 UI 요소를 만들고 관리할 수 있습니다.
2. State란?
State는 React 컴포넌트의 내부 데이터 저장소입니다. 컴포넌트의 상태를 관리하고 업데이트하는 데 사용됩니다. State는 컴포넌트의 렌더링 결과에 영향을 미칩니다.
3. Props란?
- *Props(속성)**는 React 컴포넌트 간에 데이터를 전달하는 메커니즘입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. Props는 읽기 전용이며, 컴포넌트 내에서 변경할 수 없습니다.
4. State와 Props의 차이
- State는 컴포넌트 내부에 정의되며 해당 컴포넌트에서 사용됩니다.
- Props는 부모 컴포넌트에서 자식 컴포넌트로 전달되며 자식 컴포넌트에서 사용됩니다.
html + js 와 react state 비교해보기
- html + js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>State 예제</title>
</head>
<body>
<div>
<h1>State 예제</h1>
<p id="count-display">현재 Count: 0</p>
<button id="increase-button">Count 증가</button>
</div>
<script>
// 초기 상태 설정
let count = 0;
// DOM 요소 가져오기
const countDisplay = document.getElementById('count-display');
const increaseButton = document.getElementById('increase-button');
// 버튼 클릭 시 count 증가
increaseButton.addEventListener('click', () => {
count += 1;
// 변경된 count를 화면에 반영
countDisplay.textContent = `현재 Count: ${count}`;
});
</script>
</body>
</html>이 코드는 순수한 JavaScript와 HTML을 사용하여 동일한 동작을 수행합니다. count 변수를 사용하여 상태를 관리하고, 버튼 클릭 이벤트를 리스닝하여 count를 증가시킨 다음, 변경된 count 값을 화면에 반영합니다.
- react.js + state
import React, { useState } from 'react';
function StateExample() {
// 초기 상태 설정
const [count, setCount] = useState(0);
// 버튼 클릭 시 count 상태를 증가시키는 함수
const increaseCount = () => {
setCount(count + 1);
}
// 렌더링
return (
<div>
<h1>State 예제</h1>
<p>현재 Count: {count}</p>
<button onClick={increaseCount}>Count 증가</button>
</div>
);
}
export default StateExample;위 코드는 StateExample 컴포넌트를 정의하고, 내부에서 count라는 state를 사용합니다. 초기에 count는 0으로 설정되며, 버튼을 클릭하면 increaseCount 메서드를 호출하여 count를 증가시킵니다.
props 예제
import React from 'react';
// Props를 받아서 화면에 표시하는 함수형 컴포넌트
function PropsExample(props) {
return (
<div>
<h1>Props 예제</h1>
<p>Name: {props.name}</p>
<p>Age: {props.age}</p>
</div>
);
}
export default PropsExample;위 코드에서 PropsExample 컴포넌트는 name과 age 두 개의 props를 받아 화면에 표시합니다.
이 컴포넌트를 사용하려면 부모 컴포넌트에서 name과 age를 전달해주어야 합니다. 예를 들어:
import React from 'react';
import PropsExample from './PropsExample';
function App() {
return (
<div>
<PropsExample name="John" age={30} />
<PropsExample name="Alice" age={25} />
</div>
);
}
export default App;이런 식으로 부모 컴포넌트에서 PropsExample 컴포넌트를 사용하고 필요한 데이터를 props로 전달합니다. 결과적으로 각 PropsExample 컴포넌트는 전달된 props에 따라 다른 데이터를 표시합니다.
state와 props가 같이 들어있는 예제
import React, { useState } from 'react';
function Counter() {
// State 초기화
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increase Count
</button>
<ChildComponent message="Hello from Parent" />
</div>
);
}
function ChildComponent(props) {
return <p>{props.message}</p>;
}
export default Counter;위 예제에서 Counter 컴포넌트는 count라는 State를 가지고 있고, ChildComponent에는 message라는 Props를 전달합니다.
느낀점:state props 아주기본적인 개념만 이해한거같다
이제 앞으로 조건을 어떻게 쓸지... 어떻게 적용할지는 공부를 해봐야알거같다.
짧은시간동안 많은것을 배우고있는데! 일단 코드 문법이나 많이 작성을 해봐야 눈에
익숙해질거같다 일단은 개념 익히기에 집중 하는것이 중요할것같다.
