한 입 크기로 잘라먹는 React - Day 7
12122 단어 한입크기로잘라먹는리액트리액트공부리액트공부
🗓 진행일: 2022.04.16
5-3. JSX
- MyHeader, MyFooter js 파일 만들어서 App.js에서 불러오기
- MyHeader.js
const MyHeader = () => {
return <header>헤더</header>
};
export default MyHeader;
- App.js
import React from 'react';
import './App.css';
import MyHeader from './MyHeader';
function App() {
let name = "seul";
return (
// <div className="App">
// 아래의 Fragment 태그는 <> 이런 식으로 비워줘도 됨
<React.Fragment>
<MyHeader/>
<header className="App-header">
<h2>안녕 리액트 {name}</h2>
</header>
</React.Fragment>
// </div>
);
}
export default App;
- React에서 지켜야 하는 몇 가지 규칙
- 닫힘 규칙: 여는 태그가 있다면 반드시 닫는 태그도 존재해야 한다 (그래서 Image, br 같은 태그는 열자마자 닫아줘야 한다 → 셀프 클로징 태그)
- 최상위 태그 규칙: return 하는 컴포넌트는 반드시 하나의 최상위 태그가 있어야 한다 (무조건 나머지를 묶어줘야 한다, 아니면 React.Fragment로 감싸줘야 함)
- css로 꾸며주기
const MyHeader = () => {
return <header>헤더</header>
};
export default MyHeader;
import React from 'react';
import './App.css';
import MyHeader from './MyHeader';
function App() {
let name = "seul";
return (
// <div className="App">
// 아래의 Fragment 태그는 <> 이런 식으로 비워줘도 됨
<React.Fragment>
<MyHeader/>
<header className="App-header">
<h2>안녕 리액트 {name}</h2>
</header>
</React.Fragment>
// </div>
);
}
export default App;
- 닫힘 규칙: 여는 태그가 있다면 반드시 닫는 태그도 존재해야 한다 (그래서 Image, br 같은 태그는 열자마자 닫아줘야 한다 → 셀프 클로징 태그)
- 최상위 태그 규칙: return 하는 컴포넌트는 반드시 하나의 최상위 태그가 있어야 한다 (무조건 나머지를 묶어줘야 한다, 아니면 React.Fragment로 감싸줘야 함)
App.js에 import 된 App.css로 변경해도 되고,
직접 인라인으로 스타일을 변경해도 된다
import React from 'react';
// import './App.css';
import MyHeader from './MyHeader';
function App() {
let name = "seul";
const style = {
App : {
backgroundColor: 'black',
},
h2 : {
color: "red",
},
bold_text : {
color: "green",
},
};
return (
<div style={style.App}>
<MyHeader/>
<h2 style={style.h2}>안녕 리액트 {name}</h2>
<b style={style.bold_text}>React.js</b>
</div>
);
}
export default App;
- 중괄호 안에는 배열, boolean 값 등은 넣을 수 없다
- String, int 값은 가능함
- 조건부 렌더링: 렌더를 진행할 때 삼항 연산자를 이용하여 값을 표현할 수 있음
const number = 5;
return (
<div style={style.App}>
<MyHeader/>
{/* <h2 style={style.h2}>안녕 리액트 {name}</h2> */}
<h2 style={style.h2}>안녕 리액트</h2>
<b style={style.bold_text}>
{number}는 : {number % 2 === 0 ? "짝수" : "홀수"}
</b>
</div>
);
Author And Source
이 문제에 관하여(한 입 크기로 잘라먹는 React - Day 7), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seulpace/한-입-크기로-잘라먹는-React-Day-7저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)