Web/React

[ReactJS로 영화 웹 서비스 만들기] 기본문법

분홍돼지 2024. 10. 17. 17:14

해당 내용은 노마드 코더의 강의 및 React 공식 문서, 공식문서 번역을 참고하여 작성한 글입니다.

올바르지 않은 내용이 있다면 의견 남겨주세요. 언제든지 환영입니다.

 

1. JS vs React

<!DOCTYPE html>
<html>
	<body>
		<span>Total clicks: 0</span>
		<button id="btn">click me</button>
	</body>
	<script>
		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>

count Javascript 코드

<!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>
		// 어려운 방식 react의 동작방법을 알기 위한 방식
		const root = document.getElementById("root");
		// reactJS는 유저에게 보여질 내용을 컨트롤 할 수 있음
		// reactJS는 javascript로 그리고 html로 번역
		//const span = React.createElement("span", {id: "rabong-span", style: {color: "orange"}}, "hello i'm burabong");
		// reactdom은 reactelement를 html로 바꿔준다, reactJs는 엔진
		
		const span = React.createElement("span", null, "hello i'm burabong");
		const button = React.createElement("button", {
			onClick:() => console.log('im clicked'),
			style: {
				backgroundColor: 'yellow'
			}
		}, "Click me"); // {} 프로퍼티에 이벤트도 등록 가능하다.
		const container = React.createElement("div", null, [span, button]); // div 안에 span, button 같이 들어가기 위함
		
		ReactDOM.render(container, root); // container root안에 렌더링 해줘

	</script>
</html>

버튼 클릭 시 숫자세기 - 복잡한 React 코드

 

JavaScript 처럼 html을 생성하고 그 다음 이벤트를 추가하는 것이 아닌, React.createElement()를 통해 html 생성 및 프로퍼티, 이벤트를 한번에 만들고 있음을 확인 할 수 있다.

<!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");

		// 이렇게 쓰는 방식을 JSX
		// 브라우저가 JSX를 이해하기 위해서 Babel 이용해 변환해준다
		function Span() {
			return (<span>hello i'm burabong</span>);
		}
		// const Span = () => (<span>hello i'm burabong</span>); 위와 똑같음
		const Button = () => (<button style={{
				backgroundColor: 'yellow'
			}} onClick={() => console.log('im clicked')

			}>Click me</button>);
		
		// 컴포넌트의 첫글자는 무조건 대문자, 안그러면 react, jsx는 html 태그라고 인식한다.
		const Container =() => (
			<div> 
				<Span/>
				<Button/> 
			</div>
		)
		
		ReactDOM.render(<Container/>, root); // container root안에 렌더링 해줘
	</script>
</html>

버튼 클릭 시 숫자세기 - JSX를 이용한 React 코드

  • JSX : JavaScript를 확장한 문법, HTML과 비슷하게 마크업을 작성할 수 있도록 해준다. 또한 CamelCase로 작성해야 하며 변수명에 대시를 포함하거나 class처럼 예약어를 사용할 수 없다. 다만 aria-*, data-* 어트리뷰트는 HTML과 동일하게 대시 사용하여 작성할 수 있다.
  • Babel: JavaScript 컴파일러, 주로 EMCAScript 2015+ 코드를 이전 버전의 JavaScript로 변환하는 데 사용되는 도구 체인이다. 이런 Babel은 JSX도 변환해줄 수 있다.

개발자 도구 통해서 본 BABEL 컴파일
버튼 클릭 시 숫자세기 - 좋은 코드①

 

<!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");

		// state는 데이터가 기본적으로 저장되는 곳
		function App() {
			
			console.log(React.useState(0));
			// 배열을 한번에 빼내기 위해서
			// modifier(=setCounter)가지고 state(=counter)를 변경할 때 컴포넌트 재 생성, 새로운 값 가지고 리렌더링되는 것
			// 데이터가 바뀔 때마다 컴포넌트 리렌더링하고 UI refreash하는 거다 
			let [counter, setCounter] = React.useState(0);
			const onClick=()=> {
                // counter = counter + 1은 내가 원하는 값이 나오지 않을 수 있다. 다른 곳에서 써버릴 수 있으니까
				// 이전값을 가지고 값 변화해주고 싶다면 함수를 이용한다.
				setCounter((current) => current + 1); 
			}
			return (
				<div> 
					<span>Total clicks: {counter}</span>
					<button id="btn" onClick={onClick}>click me</button>
				</div>
			)
		}
	
		ReactDOM.render(<App/>, root); 
	</script>
</html>

 

  • useState:
    • 컴포넌트에 state 변수를 추가 할 수 있는 React Hook
    • useState(InitialState), 해당 결과값이 배열이므로 const [age, setAge] = React.useState(28); 처럼 배열 구조 분해를 사용하여 변수의 이름 지정하는 것이 규칙이다.
    • 정확히 두개의 값을 가진 배열 반환한다. 첫번째는 초기 state값, 두번째는 다른 값으로 업데이트하고 리렌더링을 촉발할 수 있는 set 함수다. set 함수는 반환값이 없다.
    • 반복문이나 조건문 안에서는 호출할 수 없다.

2. Converter 

<!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");

		function App() {
			const [amount, setAmount] = React.useState(0);
			const [inverted, setInverted] = React.useState(false);


			// 입력한값으로 변경시켜 주고 싶어
			const onChange = (e) => {
				console.log(e.target.value);
				setAmount(e.target.value);
			}
			const onReset = () => setAmount();
			const onFlip = () => {
				onReset();
				setInverted((current) => !current);
			}
			return (
				<div> 
					<h1>Super Converter</h1>
					<label htmlFor="minutes">Minutes</label>
					<input value={inverted? amount * 60 : amount} id="minutes" placeholder="Minutes" type="number" onChange={onChange} disabled={inverted}/>
					<h1>you want convert {amount}</h1>
					<label htmlFor="hours">Hours</label>
					<input value={inverted? amount : Math.round(amount/60)} id="hours" placeholder="Hours" type="number" disabled={!inverted} onChange={onChange}/>
					<button onClick={onReset}>reset</button>
					<button onClick={onFlip}>Flipped</button>
				</div>
				
			)
			// label을 input과 연결시키기 위해 for="(inputId)" 그러면 label 클릭시 input 활성화가 된다.
		}
	
		ReactDOM.render(<App/>, root); 
	</script>
</html>

 

converter - react①