[React] ReactJS로 영화 웹 서비스 만들기 1
35910 단어 JavaScriptReactbabelJavaScript
💡 노마드 코더의 React 강의로 React 공부 시작!
책도 사고, 강의도 빨리 들어서 React 가 뭔지 공부해보자!
- 버튼을 클릭하면 숫자가 업데이트 되는 것을 Vanilla JS로 먼저 작성해보고, React로 작성하는 법도 공부해보자!
🔴 Vanilla JS로
<!DOCTYPE html>
<html>
<body>
<span>Total Clicks : 0</span>
<button id="btn">Click me</button>
</body>
<script type="text/javascript">
let counter= 0;
const button = document.getElementById("btn");
const span = document.querySelector('span');
function handleClick() {
counter = counter + 1;
span.innerText = `Total Clicks : ${counter}`;
}
button.addEventListener('click', handleClick)
</script>
</html>
- 바닐라 JS로는 html에 만들어진 태그들을
getElementById
와querySelector
로 요소를 가져온 다음,addEventListener
로handleClick
함수를 발생시켜줘야 한다.
🟠 React 시작하기
🟤 리액트란?
- React JS는 어플리케이션이 아주 interactive하도록 만들어주는 library
-> 엔진, interactive한 UI만들게 해줌
- react CDN링크를 추가해준다.
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
- React-dom은 library또는 package인데, 모든 react element들을 HTML body에 둘 수 있도록 해줌
🟡 createElement
<script>
const root = document.getElementById('root');
const span = React.createElement(
'span',
{ id: "sexy-span", style: {color:"red"} },
"Hello, I'm a span"
);
ReactDOM.render(span, root);
</script>
React.createElement(1, 2, 3);
: 태그를 생성해준다.- 1 : 태그
2: 속성들 : 중괄호를 이용해서 작성함
3: 태그 안에 내용 render(1, 2)
: 페이지를 렌더링, 즉 페이지에 보여줌- 1: 무슨 태그를
2: 어떤 태그 안에?
🟢 React로 외관 똑같이 만들기
<script>
const root = document.getElementById('root');
// const span = React.createElement('span', { id: "sexy-span", style: {color:"red"} }, "Hello, I'm a span");
const h3 = React.createElement('h3', {onMouseEnter: () => console.log('h3 touched')}, "Hello, I'm a span");
const btn = React.createElement('button', {onClick: () => console.log("I'm clicked")}, "Click me");
const container = React.createElement('div', null, [h3, btn]);
// ReactDOM.render(span, root);
// ReactDOM.render(btn, root);
ReactDOM.render(container, root);
</script>
createElement
의 속성부분 적는 곳에는 이벤트 핸들러도 작성 가능하다. 만약 속성이 없다면null
을 적어주면 된다.h3
,btn
각 각 렌더링 하는 것 보다container
안에 담아서 container 하나만 렌더링 하는 것이 더 편하다.- 3번 인자 부분에
[]
안에 태그 명을 넣어 주면 된다.
🔵 jsx로 작성하기
- jsx를 이용해서 좀 더 간편하게 작성 할 수 있다.
<script>
const root = document.getElementById('root');
// jsx를 이용해서 createElement 대체하기
const Title = (
<h3 id="title" onMouseEnter={() => console.log("h3 touched")}>
Hello, I'm a span
</h3>
);
const Button = (<button style={{ backgroundColor: "tomato", }} onClick={() => console.log("I'm clicked")}>Click me</button>);
const container = React.createElement('div', null, [h3, btn]);
ReactDOM.render(container, root);
</script>
- jsx문법으로 작성하면 좀 더 우리가 알기 쉽고, 보기 좋게 작성할 수 있다. html 작성하는 것과 매우 유사하다.
- jsx문법은 따로 공부를 해보자
🟣 Babel
- JSX로 작성한 것은 브라우저가 읽을 수 없어서 Babel을 이용해서 변환해줘야한다.
- 문서에 추가해주자!
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
⚪️ 컴포넌트 안에 컴포넌트
<script type="text/babel">
const root = document.getElementById('root');
// jsx를 이용해서 createElement 대체하기
function Title() {
return (
<h3 id="title" onMouseEnter={() => console.log("h3 touched")}>
Hello, I'm a span
</h3>
);
}
const Button = () => (<button style={{ backgroundColor: "tomato", }} onClick={() => console.log("I'm clicked")}>Click me</button>);
/* 컴포넌트의 첫 글자는 반드시 대문자
소문자로 작성하면 react랑 JSX는 HTML button태그라고 생각함 */
const Container = (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(Container, root);
- jsx로 작성한 것들을 함수에 담아 컴포넌트로 만들자!
- 대신 컴포넌트의 첫 글자는 무조건 대문자로 작성해 줘야한다. -> 소문자로 작성하면 react랑 JSX는 그냥 일반적인 HTML 태그라고 인식해 버린다.
<Button />
과<button />
은 엄현히 다른 것!!
🟤 Container도 함수로 작성하기
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(<Container />, root);
- 함수로 만들어 주고, render부분도 컴포넌트 형식처럼 바꿔준다.
⚫️ 변수를 JSX로 보내기
- 숫자 카운팅 되는 부분을 이제 만들어 보자
<script type="text/babel">
const root = document.getElementById('root');
let counter = 0;
function countUp() {
counter = counter + 1;
}
const Container = () => (
<div>
<h3>Total Clicks : {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
ReactDOM.render(<Container />, root);
</script>
counter
변수를 만들어 줬다.countUp
함수를 만들어 줬다.- 바뀌는 변수 부분은
{변수명}
<- 이런식으로 작성해준다. - 하지만 이렇게만 하면 아무리 눌러도 페이지의 숫자는 올라가지 않을 것이다.
🟤 리렌더링
<script type="text/babel">
const root = document.getElementById('root');
let counter = 0;
function countUp() {
counter = counter + 1;
// 리렌더링 하기
ReactDOM.render(<Container />, root);
}
const Container = () => (
<div>
<h3>Total Clicks : {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
ReactDOM.render(<Container />, root); // 페이지 업로드 될 때 1번 렌더링 된다.
</script>
- 클릭 할 때마다 렌더링을 새로 해줘야지 페이지가 새로고침된다.
ReactDOM.render(<Container />, root);
이 문장을 함수에 담아서 함수를 재사용한다.
<script type="text/babel">
const root = document.getElementById('root');
let counter = 0;
function countUp() {
counter = counter + 1;
render(); // 리렌더링 하기
}
function render() {
ReactDOM.render(<Container />, root);
}
const Container = () => (
<div>
<h3>Total Clicks : {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
render(); // 제일 처음페이지 렌더링
</script>
- Container 함수도 표현식 말고, 선언식으로 표현 할 수 있다.
function Container() {
return (
<div>
<h3>Total Clicks : {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
}
🟤 react의 특징
react.js
는 이전에 렌더링된 컴포넌트는 어떤거였는지 확인하고, 다음에 렌더링될 컴포넌트는 어떤지를 보고 다른 부분만 파악한다.- 인터랙티브한 어플리케이션 만들수 있음 -> 오로지 바뀐부분만 생성
Author And Source
이 문제에 관하여([React] ReactJS로 영화 웹 서비스 만들기 1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dpdnjs402/xmyglo7j저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)