Udemy - React 핵심 - 컴포넌트, JSX, 속성, 상태 등

리액트 어플은 컴포넌트를 결합하여 만들어짐

 

 

로컬 플젝

npm install

npm run dev
(주소에서 볼수 있긔)

control+ c하면 작업 중단

 

 

 

---

컴포넌트

 

jsx는 리액트 컴포넌트 

 

문서정렬 단축키 : shift + opt + F

 

function Header() {

return (

<header>

<img src="src/assets/react-core-concepts.png" alt="Stylized atom" />

<h1>React Essentials</h1>

<p>

Fundamental React concepts you will need for almost any app you are

going to build!

</p>

</header>

);

}

function App() {

return (

<div>

<Header />

<main>

<h2>Time to get started!</h2>

</main>

</div>

);

}

export default App;

 

 

 

---

 

중괄호 문법⭐️

JSX 안에서 JavaScript 코드를 쓰고 싶으면 중괄호 {}를 쓴다

 

 

 

 

 

---

 

children은 <> 사이 컴포넌트?

 

 

 

 

 

여기서 함수를 값으로 사용하고 싶기 떄문에 {handleClick}에서 절대 괄호를 추가하면 안됨

export default function TabButton({ children }) {

function handleClick() {

console.log("Hello World!");

}

return (

<li>

<button onClick={handleClick}>{children}</button>

</li>

);

}

 

 

 

---

 

 

useState

컴포넌트 안에서 “변하는 값(상태)“을 만들고, 그 값이 변하면 자동으로 컴포넌트를 다시 렌더링 해주는 React Hook

 

const [selectedTopic, setSelectedTopic] = useState();



...



//1. 페이지 처음
//	•	selectedTopic은 undefined야 (초기화 안 됨)
//	•	그래서 이 부분이 실행돼:

{!selectedTopic ? (
  <p>Please select a topic.</p>
) : (
  <div id="tab-content">...</div>
)}


///2. 사용자가 버튼 클릭 (예: “Props” 버튼)
///버튼 컴포넌트에는 이렇게 연결돼 있어:
<TabButton
  isSelected={selectedTopic === "props"}
  onSelect={() => handleSelect("props")}
>
  Props
</TabButton>

///버튼 누르면 이 함수가 호출돼:
function handleSelect(selectedButton) {
  setSelectedTopic(selectedButton);
}
///여기서 selectedButton은 "props"!
///그래서 setSelectedTopic("props")가 호출되고,
///➡️ selectedTopic 값이 "props"로 바뀐다!




////3. selectedTopic이 바뀌면?
////	•	React가 컴포넌트를 자동으로 다시 실행(렌더링) 시켜!
////	•	이제 selectedTopic은 "props"니까, 이 부분이 실행돼:
<div id="tab-content">
  <h3>{EXAMPLES[selectedTopic].title}</h3>
  <p>{EXAMPLES[selectedTopic].description}</p>
  <pre>
    <code>{EXAMPLES[selectedTopic].code}</code>
  </pre>
</div>
////EXAMPLES["props"] 데이터를 기반으로 제목, 설명, 코드가 화면에 나타난다.

 

---

 

조건적 렌더링

조건에 따라 화면에 보일 내용을 다르게 렌더링하는 것
삼항연산자(? :)나 AND, if 등을 써서 렌더링을 조절

{!selectedTopic ? (
  <p>Please select a topic.</p>
) : (
  <div id="tab-content">
    <h3>{EXAMPLES[selectedTopic].title}</h3>
    <p>{EXAMPLES[selectedTopic].description}</p>
    <pre>
      <code>{EXAMPLES[selectedTopic].code}</code>
    </pre>
  </div>
)}