2.React
2022. 9. 5. 15:52ㆍ프론트엔드
2022.09.05.월
1.기본 문법
-자바스크립트로 리엑트 문맥 파악하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<button class="increase">증가 버튼</button>
<script>
//div 태그 내에 동적으로 <p>0</p> 추가
//버튼 누를 때마다 0의 값을 증가
//1.Vanilla JS(순수 자바스크립트 문법)
// const root = document.querySelector('#root');
// const button = document.querySelector('button')
// let count = 0;
// root.innerHTML = '<p>0</p>';
// button.addEventListener('click', () => {
// root.innerHTML = `<p>${++count}</p>`;
// //p 태그를 새롭게 갱신(덮어씌움)
// })
//2.1.Vanilla JS with React 개념
//초기 값 <p>count 값</p>로 구성된 하나의 부품(component)
const component = {
count: 0,
updateElement() {
return `<p>${this.count}</p>`;
}
};
const root = document.querySelector('#root');
const button = document.querySelector('button');
//초기 화면 rendering
console.log('초기 화면 rendering');
render(component, root);
//브라우저 다시 렌더링하는 함수
function render(component, element) {
element.innerHTML = component.updateElement();
}
button.addEventListener('click', () => {
//특정 이벤트(button click)에 의해 component 값의 상태(state)
//바뀐 상태값으로 다시 re-rendering함
component.count += 1;
console.log('component가 새롭게 업데이트 되었으니까 다시 rendering');
render(component, root);
})
</script>
</body>
</html>-React Basic
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<button class="increase">증가 버튼</button>
<script>
// console.log(React); //React 최상위 API, React 라이브러리의 진입점
//역힐 : 어떤 컴포넌트가 가진 이전 상태(previous state)와 가장 최근 상태(state or snapshot)와의 차이를 비교해주고,
//그 변경 내역을 ReactDOM에게 전달
// console.log(ReactDOM); //React로 생성한 컴포넌트를 브라우저(Real DOM)에게 전달해주는 역할
// const component = React.createElement('div', null, 'div 엘리먼트입니다.');
// console.log(component); //<div>div 엘리먼트입니다.</div>를 생성한 것
//element의 중첩(Nesting)
/*
<div>div입니다
<p>p입니다</p>
</div>
*/
//React.createElement(type, [props], [...chidren])
// const component = React.createElement('div', null, 'div입니다.', React.createElement('p', null, 'p입니다'));
//React로 작성한 component를 ReactDOM을 통해 렌더링
// ReactDOM.render(component, document.getElementById('root'));
//============ 실제 component 작성 방식 =================
//component 작성 방식은 2가지
//1.클래스형 컴포넌트 2.함수형 컴포넌트
//함수형 컴포넌트(Functional component) 작성 방식(컴포넌트는 일반적으로 대문자로 시작)
const Component = props => { //Component 라는 이름의 함수형 컴포넌트 생성
return React.createElement('p', null, `${props.count}`); //이 컴포넌트는 <p>count값?</p>을 반환함
};
//초기 렌더링
ReactDOM.render(React.createElement(Component, { count: 0 }, null), document.getElementById('root'));
let i = 0; //count프로퍼티의 상태 값을 담을 변수
//이벤트 발생에 따라 컴포넌트의 상태값을 변경하고, 브라우저를 다시 렌더링
document.querySelector('button').addEventListener('click', () => {
ReactDOM.render(React.createElement(Component, { count: i += 1 }, null), document.getElementById('root'));
})
</script>
</body>
</html>2.JSX
-without JSX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div> <!-- 앞으로 작성할 react app은 이 <div> 내부에 렌더링 되도록 -->
<!--
React createElement()를 활용하여 아래의 화면을 만들어보기
//React.createElement(type, [props], [...chidren])
// const component = React.createElement('div', null, 'div입니다.', React.createElement('p', null, 'p입니다'));
-->
<script>
const Component = props => {
//여기에 작성
return React.createElement('ul', null,
React.createElement('h2', null, 'Things cats lkie'),
React.createElement('ul', null,
React.createElement('li', null, 'Coffee'),
React.createElement('li', null, 'Tea'),
React.createElement('li', null, 'Milk')
)
);
}
//ReactDOM을 활용하여 화면에 렌더링
//TODO : 작성
ReactDOM.render(React.createElement(Component, { }, null), document.getElementById('root'));
</script>
</body>
</html>-with JSX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
//1.Applying JSX with bable CDN
// ReactDOM.render( //Babel이 직접 작성한 html element를 React.creatElement()로 변환해줌
// <ul>
// <h2>Things cats like</h2>
// <li>Coffee</li>
// <li>Tea</li>
// <li>Milk</li>
// </ul>,
// document.getElementById('root')
// );
//2.JSX code를 함수형 컴포넌트 방식으로 분리
const MyComponent = () => { //MyComponent : 내가 직접 만든 Custom Component
//이 Custom Component는 HTML Element들로 구성되어 있음
//MyComponent도 하나의 Element로 볼 수도 있음
return <ul>
<h2>Things cats like</h2>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
};
//작성한 MyComponent를 root에 렌더링
ReactDOM.render(<MyComponent />, document.getElementById('root'));
</script>
</body>
</html>3.Component_props
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
avatarUrl: 'http://placekitten.com/g/64/64',
}
};
//일반 함수
function formatDate(date) {
return date.toLocaleDateString();
}
// const Welcome = props => { //Welcome 컴포넌트
// return <h1>Hello, {props.name}</h1>;
// }
// const App = () => { //최상위 컴포넌트 생성(Welcome보다 상위, Welcome을 자신의 컴포넌트로 가지고 있는 컴포넌트)
// return (
// <div>
// <Welcome name='Sara'/>
// <Welcome name='Cahal'/>
// <Welcome name='Edite'/>
// </div>
// );
// }
// ReactDOM.render(<App />, document.getElementById('root'));
const Comment = props => {
return (
<div className='Comment'>
<UserInfo author={props.author} />
<div className='Comment-text'>{props.text}</div>
<div className='Comment-date'>{formatDate(props.date)}</div>
</div>
);
}
const Avatar = props => {
return (
<img className='Avatar'
src={props.author.avatarUrl}
alt={props.author.name}
/>
);
}
const UserInfo = props => {
return (
<div className='UserInfo'>
<Avatar author={props.author}/>
<div className='UserInfo-name'>{props.author.name}</div>
</div>
);
}
ReactDOM.render(<Comment date={comment.date}
text={comment.text}
author={comment.author}
/>, document.getElementById('root'));
</script>
</body>
</html>'프론트엔드' 카테고리의 다른 글
| 4.React CSS (0) | 2022.09.07 |
|---|---|
| 3.React (0) | 2022.09.06 |
| 1.CSS (0) | 2022.08.17 |
| 0.HTML/CSS (0) | 2022.08.16 |