ReactJS Course [2] - JSX, Components, Props...
리액트는 JSX로 이루어져있다.
JSX라고 하면, 자바스크립트와 html이 섞여있고 혼용해서 써도 되는 것이라고 생각하면 된다.
import logo from "./logo.svg";
import "./App.css";
function App() {
const name = "Herminoe";
return <div className="App">
<h1>{name}</h1>
</div>;
}
export default App;
위 코드에서는 자바스크립트 변수로 선언한 string name이 html안에 {} 속에 들어가 표시되고 있다.
그리고 html 태그 사이에 이름을 끼워넣는 것 뿐만 아니라, 사용된 html 태그 자체를 변수처럼 사용할 수도 있다. 즉, ui를 변수에 저장해서 쓸 수 있다!
import logo from "./logo.svg";
import "./App.css";
function App() {
const name = <h1>Hermione</h1>;
return <div className="App">
{name}
</div>;
}
export default App;
그런데 만약 우리가 여러명의 유저의 정보를 받아서 어딘가에 넣어야 한다면 어떻게 하면 좋을까?
import logo from "./logo.svg";
import "./App.css";
function App() {
const name = <h1>Hermione</h1>;
const age = <h2>11</h2>;
const house = <h2>Gryffindor</h2>;
return <div className="App">
{name}
{age}
{house}
{name}
{age}
{house}
{name}
{age}
{house}
</div>;
}
export default App;
단순히 이렇게 늘어놓을 수도 있지만 너무 못생겼다.
이 때 우리가 배운 변수에 ui를 저장하는 방식을 쓸 수 있을 것이다.
import logo from "./logo.svg";
import "./App.css";
function App() {
const name = <h1>Hermione</h1>;
const age = <h2>11</h2>;
const house = <h2>Gryffindor</h2>;
const user = (
<div>
{name}
{age}
{house}
</div>
);
return <div className="App">
{user}
{user}
{user}
</div>;
}
export default App;
이렇게 하면 더 깔끔하게 코드를 짤 수 있다~
Components
이렇게 각 변수에 ui를 저장하는 것보다 더 좋은 방법이 있다.
바로 프로젝트에 componet를 사용하는 것이다.
컴포넌트는 ui/JSX를 리턴하는 자바스크립트 함수이다.
const GetName = () => {
return "Name";
};
cosnt GetNameComp = () =>{
return <h1>Name</h1>;
}위의 함수는 이름을 반환하는 자바스크립트 함수이고 아랫쪽은 html 태그를 반환하는, jsx로 이루어진 리액트 컴포넌트이다.
리액트 컴포넌트 이름은 반드시 대문자로 시작해야 한다는 규칙이 있다.
그러면 이 컴포넌트를 어떻게 사용하는걸까?
위에서 user에 해당하는 여러개의 태그를 하나의 변수로서 저장했다면, 이번엔 컴포넌트로 만들어볼 수 있다.
const User = () => {
<div>
<h1>Hermione</h1>
<h2>11</h2>
<h2>Gryffindor</h2>
<div>
}이렇게 하면 이 User라는 이름의 컴포넌트는 그 안에 있는 태그들을 묶은 div를 반환하게 된다. 이렇게 만든 컴포넌트는 App 컴포넌트 안에 넣어서 UI에 표시되게 할 수 있다.
APP 컴포넌트는 UI에 드러나는 부분이라고 생각하면 된다.
function App() {
return (
<div className="App">
<User/>
</div>
);
);
const User = () => {
<div>
<h1>Hermione</h1>
<h2>11</h2>
<h2>Gryffindor</h2>
</div>
}이런 식으로 우리가 만든 User 컴포넌트가 App 컴포넌트 안에 들어간 태그인 것 처럼 사용하면 UI로서 유저에게 보여지게 할 수 있다.
Props
보통의 자바스크립트 함수에서는 인자를 받아서 사용한다.
리액트에서는 이런 느낌으로 prop을 받아서 쓸 수 있다.
Props는 일종의 어떤 컴포넌트 안에 존재하는/받아서 쓰는 자바스크립트 객체이다. 그리고 이 props는 아마 우리가 그 컴포넌트 안에서 쓰고싶어하는 모든 데이터를 나타낼 것이다. props는 아마 이렇게 생긴 느낌이라고 생각하면 쉬울 것이다.
const props = {
name: "Hermione",
age: 11,
house:Gryffindor,
}그래서 따로따로 필요한 영역을 채워주는 것 대신에, 우리는 이렇게 쓸 수 있다.
function App() {
return (
<div className="App">
<User name="Hermione" age={11} house={Gryffindor}/>
<User name="Ron" age={10} house={Gryffindor}/>
<User name="Malfoy" age={11} house={Slytherine}/>
</div>
);
);
const User = (props) => {
<div>
<h1>{props.name}</h1>
<h2>{props.age}</h2>
<h2>{props.house}</h2>
</div>
}이렇게 하면 user 컴포넌트에 들어가는 정보만 수정하고도 각자 다른 세 명의 유저를 ui에 나타낼 수 있다.
다른 예시 component
const Job = (props) => {
return (
<div>
<h1>{props.salary}</h1>
<h2>{props.position}</h2>
<h2>{props.company}</h2>
</div>
);
}