● React ●
(1) 시작 전 튜토리얼
1) 프로젝트 실행 (pakage.json 의 명령어 중 선택)
npm run start
2) 프로젝트 구성 파일
- public/index.html
- src/index.js
- src/App.js
- src/index.css
- src/App.css
(2) HTML 문서를 리액트로 변환
App.js 파일에서 컴포넌트 단위(함수)로 쪼개어 분류
import './App.css'; // import 문 => 외부 파일 임포트
import styles from './nav.module.css'; // 컴포넌트에서 쓰이는 css는 중간에 module 필수
function Header(data_header) { // 컴포넌트(함수)의 파라미터 : 해당 컴포넌트에서 쓰이는 변수
return ( // 리턴값은 필수
<header>
<h1>{data_header.title}</h1> // 컴포넌트로 데이터 전달(중괄호 사용 {})
{data_header.content}
</header>
);
}
const Nav = (data_Nav) => {
return (
<nav>
<ul className={styles.border}>
<li><a href='1.html'>{data_Nav.list1}</a></li>
<li><a href='2.html'>{data_Nav.list2}</a></li>
<li><a href='3.html'>{data_Nav.list3}</a></li>
</ul>
</nav>
)
}
const MyConponent = (a_data) => {
return (
<div>
<h1>{a_data.data1}</h1>
<h1>{a_data.data2}</h1>
<h1>1</h1>
</div>
);
}
function App() {
return (
<div className="App">
<Header title='WEB' content="World Wide Web!" />
<hr></hr>
<Nav list1 = "HTML" list2 = "CSS" list3 = "Javascript" />
<MyConponent data1='hello' data2='react'/>
</div>
);
}
export default App;
※ 컴포넌트로 데이터 전달하기
1. 컴포넌트를 호출할 때 속성을 사용하여 전달하고자 하는 데이터 입력
2. 컴포넌트 내에서 내부 객체를 통해 데이터를 사용
더보기
live server - 127.0.0.1:5500
react run - localhost:3000
localhost == 127.0.0.1
[Event 연습문제 1] inch를 cm로 변환하는 기능 구현하기
<body>
<input type="text"> inch
<button>계산</button>
<p></p>
</body>
<script>
const input = document.querySelector('input');
const output = document.querySelector('p');
const button = document.querySelector('button');
button.addEventListener('click', () => {
const value = input.value * 2.54;
output.textContent = `${parseFloat(value)} cm`;
});
</script>
[Event 연습문제 2] 검색용 해시태그 입력을 위한 사용자 편의 기능 추가하기
<body>
검색어 입력 : <input type="text" name="search">
</body>
<script>
const input = document.querySelector('[name=search]');
input.addEventListener('focus', (event) => {
let search = event.currentTarget.value; // 선택한 타겟의 값
if(search.length == 0) {
event.target.value = '#';
}
});
input.addEventListener('keyup', (event) => {
let keyCode = event.keyCode;
if(keyCode == 32) {
let pressValue = event.target.value;
pressValue = pressValue.substring(0, pressValue.length - 1);
event.target.value = pressValue + ', #';
}
console.dir(event);
});
</script>
[Event 연습문제 3] "이동" 링크를 클릭하면 아래와 같은 경고창을 보여주고 웹사이트 이동 막기
<body>
<a href='http://ggoreb.com'>이동</a>
<script>
const clickToMove = document.querySelector('a');
clickToMove.addEventListener('click', (event) => {
event.preventDefault();
alert('차단');
});
</script>
