해당 게시물은 구름 국비교육 과정 내에서 React를 도입하기 전, React를 시작함에 있어서 어려운 게 아니라는 점을 알려주고 싶은 계기로 작성되어 있습니다.. React 소개와 모두 이전에 배우셨던 html을 어떻게 React로 표현할 수 있는지에 포커스를 맞추어 최대한 이해하기 쉽도록 구성하였습니다.. 부족한 점이 많겠지만 이해하는 데에 도움이 되셨으면 좋겠습니다..
React 란 무엇일까??
: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리 입니다!
: “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.
React 왜 쓰는데요??
- 웹페이지는 굳이 react안써도, html, css, javascript를 이용해서 만들 수 있습니다..
- 하지만, react를 이용하면 동적인 인터페이스를 더 손쉽게 만들 수 있습니다!!
React JS 설치
- 리액트 JS를 설치하기 위해선 두 개의 JS코드를 import 해야 합니다. (react, react-dom)
- reactJS는 UI만들 수 있게해주는 JS라이브러리입니다.
- react-dom은 모든 React element들을 HTML body에 두는 역할입니다.
- 본래는 아래의 코드를 주로 사용하지만, 기초 연습을 위해 따로 srcipt두는 것 만으로 작업을 하겠습니다..!
npx create-react-app [폴더이름] —template typescript npm i react-router-dom npm i @types/react-router-dom
VanillaJS를 사용할 때에
<!DOCTYPE html>
<html>
<body>
<h1>0</h1>
<button id="btn">꾸-욱</button>
</body>
<script>
let count = 0;
const button = document.getElementById("btn");
const h1 = document.querySelector("h1");
function handleClick() {
console.log("꾸-욱");
count = count +1;
h1.innerText = count;
}
button.addEventListener("click", handleClick);
</script>
</html>
ReactJS를 사용한다면..?!!
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<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>
const root = document.getElementById("root");
const h1 = React.createElement(
"h1",
{ id: "big_text", style: { color: "red" }},
"Hello World"
);
const btn = React.createElement(
"button",
{ onClick: () => console.log("꾸-욱") },
"꾸-욱"
);
const container = React.createElement(
"div",
null,
[h1, btn]
);
ReactDOM.render(container, root);
</script>
</html>- ReactDOM.render(span, root); ReactDOM에게render하라고 시킵니다. (h1을 root위치로)
- render의 의미:= React element를 사용자에게 보여줍니다.
- root만을 body&가져와서 거기에 ReactDOM한테 render 하라고시키면 끝입니다! 간단하지 않..나요..!!!
특징 1. 단방향 데이터 흐름
즉, 단방향 데이터 바인딩!!
const span = React.createElement("span", {id : “spann”}, “hello Wolrd”); //span의 property- 즉, 한번에 span ‘HTML element’만들고 동시에 id부여 가능합니다. (세번째 property까진 보통안씁니다)
- 바닐라JS : HTML먼저만들고, 그걸 JS로 가져와서 작업(eventListener 입력)
- 리액트JS : ReactJS로element를만들고eventLinstener더하는걸도와줌 → 그걸 (ReactJS (정확힌 ReactDOM으로)) HTML 로(여기선body로) 가져다 주는 것 (span → span)
- 즉, ReactJS는업데이트를 HTML에보여주는 역할을 하는 거죠!
결론: reactJS로 html element 작업해주기 편리하다
추가 개념: 더 편한 ReactJS 사용
추가적으로 알려드리고 싶은 점은 ReactJS의 추가적인 문법입니다..!! ReactJS에서는 주로 JSX문법을 쓰는데 이거는 ReactJS로 element만들때 더 편하게 만들어주게 해주는 문법입니다! 아래 코드를 보시죠!!!
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title = () => (
<h1 id="big_text"
style={{ color: "red" }}>
HelloWorld</h1>
)
const Btn = () => (
<button id="btn"
onClick={ () => console.log("꾸-욱") }
>
꾸-욱</button>
)
const Container = () => (
<div>
<Title />
<Btn />
</div>
)
ReactDOM.render(<Container />, root);
</script>
</html>
- 브라우저는 JSX문법을 이해할수 없기 때문에 한번 변환시켜줘야합니다!(babel)
- 밑의 내용들은 다 바벨한테 변환해 달라고 하는 것을 나타냅니다! (JSX→ReactJS로)
특징 2. JSX
babel전 React코드와 JSX코드의 차이점
< babel 전 React 코드>
React element 생성할 때에 ' const Button = ' 같은 상수 형식으로 선언하지 않나요??
(예를 들어, React.createElement(”button”, null, "Hello World");
<JSX 코드 >
- React component 생성할 때에는 'const Button = () ⇒ ( ) or function Button() { return } ' 같은 함수 형식으로 선언합니다!
( 컴포넌트란 쉽게 말해, JSX를 반환하는 함수를 일컫습니다 )
컴포넌트를 작성할 때 유의 할 점
1. 컴포넌트의 첫 글자는 반드시 대문자 (만약, 소문자로 작성한다면, React와 JSX는 해당 컴포넌트는 HTML 태그( ex) button 태그)라 생각할 수 있습니다.
예시)
- h1태그를 랜더링하고있는 컴포넌트 : Title
- button태그를 랜더링하고있는컴포넌트 : Button
- div태그를 랜더링하고, Title, Button 의코드를담고있는컴포넌트 := Container
- JSX ⇒ 어플리케이션을 깔끔하게작은요소들로나눠서 코드를 관리할수 있도록 해주는 장점이 있습니다!
2. 각 컴포넌트에서 return을 할 땐, 한 element만 return 가능합니다.
예시)
function Container() {
return (
<div>
<MorningTime />
<LunchTime />
</div>
)
}
특징 3. Component 기반 구조
ReactJS에서의 변수 사용
State
modifier함수를 가지고, state가 바뀌면, 컴포넌트 자체가 재생성됩니다. 즉, 총 리랜더링이 일어납니다.
하지만, 달라지는건 state값 뿐입니다..!!
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title = () => {
const [ count, setCount ] = React.useState(0);
const onClick = () =>{
setCount(count + 1);
}
return (
<div>
<h1> { count } </h1>
<button onClick={ onClick }>꾸-욱</button>
</div>
)
}
ReactDOM.render(<Title />, root);
</script>
</html>
ReactJS에서의 값 전달
자식→부모로 값을 전달 : return
부모→자식으로 값을 전달 : ?? 의 해답이 바로 props 입니다
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function MorningTime() {
return (
<h1>03:00:00</h1>
)
}
function LunchTime() {
return (
<h1>02:00:00</h1>
)
}
function Container() {
return (
<div>
<MorningTime />
<LunchTime />
</div>
)
}
ReactDOM.render(<Container />, root);
</script>
</html>
Prop
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Time(props) {
return (
<h1>{props.time}:00:00</h1>
)
}
function Container() {
return (
<div>
<Time time={3} />
<Time time={2} />
</div>
)
}
ReactDOM.render(<Container />, root);
</script>
</html>
- Props는 일종의 방식: 부모 컴포넌트로내에서 자식 컴포넌트로 데이터를전달하는 방법입니다
- 부모컴포넌트로부터 전달하는,전달받는 인자를 props 라는 이름쓰자 라는 약속 (properties)
- 같은 코드를 여러 번 작성안해도 되는 편리합니다!
props 작성할 때의 규칙
부모에서전달할때의 이름과, 받아서쓸때의 이름은 반드시 같은 이름 이여야 합니다
ES6 방식과 PropTypes
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<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.production.min.js"></script>
<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 type="text/babel">
function Time( {time} ) {
return (
<h1>{time}:00:00</h1>
)
}
Time.propTypes ={
time: PropTypes.number.isRequired,
}
function Container() {
return (
<div>
<Time time={"asd"} />
<Time time={2} />
</div>
)
}
ReactDOM.render(<Container />, root);
</script>
</html>- Btn.propTypes : 부모로부터 전달받을 때 변수 형식을 검사합니다.
- propTypes으로 다음과 같은 형식 에러를 발생시킬 수 있습니다.
'협업' 카테고리의 다른 글
| [협업] CSR, SSR이 뭐에요?? (0) | 2023.08.30 |
|---|---|
| [협업] Git 브랜치 전략 선택 이유, 명령어 소개 (0) | 2023.08.25 |
| [협업] 브라우저가 렌더링하는 과정 (feat. React) (0) | 2023.07.16 |
