728x90
React Component
UI를 재사용이 가능한 개별적인 여러 조각으로 나눔
📌 함수형 컴포넌트
// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
return <div>hello</div>
}
📌클래스형 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
📌 JSX
자바스크립트의 확장 문법이며 XML과 비슷
📌 { }
자바스크립트 표현식을 JSX 내부에 작성하려면 {}로 감싸줌.
import logo from './logo.svg';
import './App.css';
// im : 안쪽
// ex : 바깥쪽
// port : 항구
function App() {
// 여기가 자바스크립트를 쓸 수 있는 영역입니다.
return (
// JSX(Javascript + XML - HTML)
// 자바스크립트 문법 쓰고 싶을 때 : {}
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
📝 컴포넌트 만들기 실습1
import React from 'react';
function App() {
// <---- 자바스크립트 영역 ---->
// function onClickButtonHandler () {
// alert('클릭!');
// }
const onClickButtonHandler = () => {
alert('클릭!');
}
/* <---- HTML/JSX 영역 ---->*/
return (
<div
style={{
height: '100vh',
display: ' flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}
>
{/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
<span>이것은 내가 만든 App 컴포넌트 입니다</span>
<button onClick={onClickButtonHandler}>클릭!</button>
</div>
);
}
export default App;
📌 부모자식 컴포넌트
반복되는 로직이 생길 경우 유용!
import React from 'react';
// 자식 컴포넌트
function Child() {
return <div>나는 아들입니다.</div>;
}
// 부모 컴포넌트
function App() {
return (
<>
<Child />
<Child />
<Child />
<Child />
<Child />
</>
);
}
export default App;
📝 컴포넌트 만들기 실습2
import React from 'react';
// 할아버지 컴포넌트
function Grandfather() {
return <Mother />;
}
// 엄마 컴포넌트
function Mother() {
return <Child />;
}
// 자식 컴포넌트
function Child() {
return <div>연결 성공 !</div>;
}
// 부모 컴포넌트
function App() {
return (
<>
<Grandfather />
</>
);
}
export default App;
'JavaScript > React' 카테고리의 다른 글
State (0) | 2023.06.06 |
---|---|
JSX, Props (2) | 2023.06.04 |
Create React App (0) | 2023.06.03 |
React 개발 환경 세팅 (0) | 2023.06.03 |
React 소개 및 JavaScript 문법 (0) | 2023.06.03 |