728x90
📌2.6 JSX
JSX 란?
문자열도, HTML도 아닌 JavaScript 를 확장한 문법입니다. React에서 JSX 사용이 필수가 아니지만, 대부분의 사람들은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 도움이 된다고 생각하여 사용이 됩니다.
예시 보기
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);두 예시는 동일한 기능을 합니다. 다만, 위의 예시는 JSX를 통해 표현을 했고 밑의 예시는 React.createElement() 문법을 사용하여 표현하였습니다.
Babel 이란?
ES6 및 JSX 코드가 올바르게 표시되도록 하기 위해 편집기에 Babel 언어 설정을 하게 됩니다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>다음과 같이 라이브러리를 설치해줍니다. 그리고 중요한 점은 JSX 표현식이 사용된 script에 type을 지정해 주는 것입니다.
<script type="text/babel">
const root = document.getElementById("root");
const Title = (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a span
</h3>
);
</script>
관련 코드 보기
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- JSX 로 이해할 수 있게 변환하는 babel script -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title = (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a span
</h3>
);
const Button = (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("im clicked")}
>
Click me
</button>
);
const container = React.createElement("div", null, [Title, Button]);
ReactDOM.render(container, root);
</script>
</html>
📌2.7 JSX part Two
함수 표기법
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function Title() {
return (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a span
</h3>
);
}
const Button = () => (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("im clicked")}
>
Click me
</button>
);
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>
표기방식 1) function 함수명(){ return }
표기방식 2) const 함수명 = () => ()
주의할 점
Component는 시작이 대문자입니다. 만약 <Button />이 아니라 <button> 으로 기재한다면 정의해둔 function 이 아닌 <button></button>란 HTML 태그의 기능으로 인식하게 될 것입니다.
<script type="text/babel">
const Button = () => (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("im clicked")}
>
Click me
</button>
);
const Container = (
<div>
<Button />
</div>
);
ReactDOM.render(Container, root);
</script>
</html>
<참고자료>
노마드 코더 Nomad Coders
코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요!
nomadcoders.co
https://ko.legacy.reactjs.org/docs/introducing-jsx.html
JSX 소개 – React
A JavaScript library for building user interfaces
ko.legacy.reactjs.org
https://babeljs.io/docs/babel-standalone
@babel/standalone · Babel
@babel/standalone provides a standalone build of Babel for use in browsers and other non-Node.js environments.
babeljs.io
📌3.5 Inputs and State
배포모드 -> 개발모드 변경
배포 모드
- production.min
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
개발 모드
- development
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script> - JSX는 class는 className으로 for은 htmlFor로 바꿔쓴다
<div> <h1 className="hi">Super Converter</h1> <label htmlFor="minutes">Minutes</label> </div>
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script type="text/babel">
function App() {
const [minutes, setMinutes] = React.useState();
const onChange = (e) => {
setMinutes(e.target.value);
};
return (
<div>
<h1 className="hi">Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
/>
<h4>You want to convert {minutes}</h4>
<label htmlFor="hours">Hours</label>
<input id="hours" placeholder="Hours" type="number" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
📌4.1 Memo
사용 이유
컴포넌트를 memo((Component, arePropsEqual?)) 형태로 감싸게 되면 컴포넌트의 memorized 버전을 얻을 수 있다. 이 컴포넌트는 일반적으로 부모 컴포넌트가 리렌더링(re-render)가 되더라도 props가 변경되지 않았다면 리렌더링이 되지 않는다.
즉, 불필요한 리렌더링을 줄이기 위해 사용 되며, 성능 문제를 사전에 방지하는 역할을 한다.
: Component 란, memorize 하려고 하는 컴포넌트 대상이다.
: arePropsEqual 란, optional 값이며 컴포넌트가 이전 props와 동일한 결과를 렌더링하고 새로운 props 에도 이전과 같은 방식으로 동작하는 경우 true를 반환하며 아닌 경우 false를 반환하게 된다.
강의에서 주의할 점
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- JSX 로 이해할 수 있게 변환하는 babel script -->
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script type="text/babel">
function Btn({ text, onClick }) {
console.log(text, "was rendered");
return (
<button
onClick={onClick}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: "0",
borderRadius: 10,
}}
>
{text}
</button>
);
}
const MemorizedBtn = React.memo(Btn);
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return (
<div>
<MemorizedBtn text={value} onClick={changeValue} />
<MemorizedBtn text="Continue" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
1. <MemorizedBtn onClick={}> 은 onClick 이벤트를 뜻하는 것이 아닌 단순 props 이름이다. onClick이 아닌 click 등 다른 이름으로 변경할 수 있다.
2. onClick 이벤트 리스너로 활용하고 싶다면 해당 컴포넌트의 props로 이벤트 리스너를 등록하면 된다.
📌4.2 Prop Types
다운로드
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
적용법
<script type="text/babel">
function Btn({ text, fontSize = 12 }) {
return (
...
);
}
Btn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropTypes.number,
};
function App() {
return (
<div>
<Btn text="Save Changes" fontSize={18} />
<Btn text={"Continue"} />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>컴포넌트.propTypes = {
// PropTypes. 와 같이 조건 추가
}
사용목적
1. Prop은 component에 보내지는 argument 이다.
2. PropType을 이용하여 보내지는 prop에 type을 지정할수 있으며 validation 과 같은 역할은 한다고 볼 수 있다.
잘못된 type이 prop 에 전달된다면 React는 에러메시지를 띄우게 된다.
📌5.0 Introduction ~ 5.1 Tour of CRA
React 설치 방법
1. node js 사용자 버전 설치
2. 바탕화면, 내문서 등 원하는 곳에서 새로운 폴더 생성(이름: react-for-beginners)
3. vscode에서 해당 폴더 열어줌
4. vscode 상단 메뉴에서 Terminal - New Terminal 클릭 (명령어로 vscode 제어 가능)
5. node -v 입력 후 현재 버전이 표시되면 node js 설치 성공한 것
6. terminal에 npx create-react-app . 입력하고 엔터(현재 폴더에 개발환경을 셋팅하겠다는 뜻)
*이 때 뭐 설치하겠냐고 하면 y 눌러서 설치해주시면 됩니다.
7. Success!가 뜨면 설치 완료
(출처:monoch729)
Prop Types 설치 방법
명령어 ) npm i prop-types
Global 이 아닌 module 별로 스타일 지정
과정
 |
| Button.js에서 사용할 css 생성 |
 |
 |
| 1. 클래스 이름으로 스타일 지정 | 2. Button.js 에서 css import 하기 3. 스타일을 적용할 html 역할을 하는 곳에 className={styles.btn} 와 같이 className 할당하기 |
결과
 |
| 다음과 같인 Random class 값이 주어짐 |
📌7.4 Movie App part Two
React Router 설치
npm install react-router-dom
📌7.5 React Router
React Router 문법
react-router-dom
npm i react-router-dom
@5.3.0
https://v5.reactrouter.com/web/guides/quick-start
react-router-dom 5버전 -> 버전6 바뀐 부분
1. Switch컴포넌트가 Routes컴포넌트로 대체되었습니다.
Switch -> Routes
2. Route컴포넌트 사이에 자식 컴포넌트를 넣지 않고, element prop에 자식 컴포넌트를 할당하도록 바뀌었습니다.
Route path="/" element={< Home / >}
react-router-dom 6버전 문서
https://reactrouter.com/docs/en/v6/getting-started/overview
(출처: Sugar)
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./routes/Home";
import Detail from "./routes/Detail";
function App() {
return (
<Router>
<Routes>
<Route path="/hello"></Route>
<Route path="/movie/:id" element={<Detail></Detail>}></Route>
<Route path="/" element={<Home></Home>}></Route>
</Routes>
</Router>
);
}
export default App;react-router-dom 버전 6 이후부터는 다음과 같이 문법이 변경되었다.
📌7.7 Publishing
Github Pages 업로드 / 배포
설치팩 명령어
npm i gh-pages
build 명령어
npm run build
deploy 명령어
npm run deploy
Deploy 추가하기
package.json - "scripts" {} 에 deploy / predeploy 추가하기
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"deploy": "gh-pages -d build",
"predeploy": "npm run build"
},
...
,
"homepage": "https://깃허브 유저네임.github.io/깃 리포지토리 이름"다음과 같이 scripts 에
"deploy": "gh-pages -d build",
"predeploy": "npm run build"
를 등록하면 npm run deploy 할 시 predeploy가 먼저 실행이 되고 그 후 deploy가 실행이 된다.
"homepage" 등록도 필요하다.
homepage는 github pages가 생성될 주소이다.
오류
만약, 빈 화면으로 나온다면 아래와 같은 경로를 App.js에 추가할 필요가 있다.
<Route
path={`${process.env.PUBLIC_URL}/`}
element={<Home></Home>}
></Route>
path 경로를 다음과 같이 설정해준 후 다시 build 후 배포하면 정상적으로 작동이 된다.
728x90
'LANGUAGE > React' 카테고리의 다른 글
| [Next.js] Next.js/React 에 Font Awesome Icon 적용하기/ 아이콘 추가하는 법 (0) | 2024.06.19 |
|---|---|
| [Error][Next.js] Invalid src prop ~ on `next/image` 해결 방법/ 외부 이미지 허가 설정하기 (0) | 2024.06.18 |
| [React] 클래스형 컴포넌트의 생명주기(life cycle) (0) | 2024.06.05 |
| [React] 실전형 리액트 Hooks 10 (0) | 2024.06.04 |
| [React] npm start 오류 / npm start 명령어 안됨 (0) | 2024.05.29 |
