<div id="readability-page-1" class="page"><div><h2 id="-웹-게임을-만들며-배우는-react-1강">📌 웹 게임을 만들며 배우는 React 1강</h2>
웹 게임을 만들며 배우는 React 1강 강의 내용을 정리한 포스팅입니다.
https://www.inflearn.com/course/web-game-react
<h2 id="-리액트는-왜-사용하는가">✅ 리액트는 왜 사용하는가?</h2>
리액트는 SPA(single page Application)
<ul>
<li>화면 깜빡임이 없다.</li>
<li>거의 앱과 비슷한 느낌이난다.</li>
<li>사용자 인터페이스, 사용자 경험등이 좋아진다.</li>
<li>웹보다는 앱이 사용자 경험이 좋다.</li>
<li>데이터 처리를 쉽게하기 위해서 사용한다.</li>
<li>재활용 가능한 웹 컴포넌트를 만든다.</li>
</ul>
<ol>
<li>
사용자 경험
</li>
<li>
재사용 컴포넌트 (중복되는 요소들을 하나로 묶어줄 수 있다.)
</li>
<li>
데이터-화면 일치
</li>
</ol>
<h2 id="-리액트는-왜-어려운가">✅ 리액트는 왜 어려운가??</h2>
<ul>
<li>컴포넌트로 만드는 사고 방식이 어렵다.</li>
</ul>
<h2 id="-jsx와-바벨babel">✅ JSX와 바벨(babel)</h2>
JSX : (JS + XML)
<ul>
<li>content 부분에 중괄호를 사용하면 자바스크립트 코드 작성이 가능하다.</li>
<li>컴포넌트 하나를 만들면 원하는 갯수만큼 쉽게 늘리거나 줄일 수 있다.</li>
</ul>
<h2 id="-상태">✅ 상태</h2>
<ul>
<li>변하는 부분이 상태임을 기억해야한다.</li>
</ul>
<h2 id="-fragment와-기타-팁">✅ Fragment와 기타 팁</h2>
<ul>
<li>React가 예전에는 컴포넌트도 항상 div로 감싸주어야 했다.</li>
<li>하지만 지금은 &lt;&gt; 빈 태그나 <code>React.Fragement</code> 로 감싸주어 표현할 수 있다.</li>
</ul>
과거 방식
<pre><code>render() {
	return (
		&lt;div&gt; 
			&lt;div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	)
}</code></pre>
현재 방식
<pre><code>render() {
	return (
		&lt;React.Fragment&gt;
				&lt;div&gt;
				&lt;/div&gt;
			&lt;/React.Fragmet&gt;
	)
}</code></pre>
<pre><code>render() {
	return (
		&lt;&gt;
			&lt;div&gt;
			&lt;/div&gt;
		&lt;/&gt;
	)
}</code></pre>
<h3 id="class-컴포넌트-함수에서-화살표-함수를-넣어야하는-경우">class 컴포넌트 함수에서 화살표 함수를 넣어야하는 경우</h3>
<blockquote>
class 내부 함수에서 **<code>화살표 함수</code>**가 아닌 function으로 함수 선언식을 사용한다면 <code>this</code> 접근 범위가 달라지기 때문에 **<code>화살표 함수</code>**를 사용한다.
</blockquote>
<pre><code>constructor(props) {
	super(props);
	this.state = {
		value = '',
	}
}</code></pre>
<blockquote>
위의 로직이 반드시 필요한 것이 아니다. 실무에서는 아래와 같이 많이 표현한다.
</blockquote>
<pre><code>state = {
	value = '',
}
</code></pre>
<h2 id="-함수형-setstate">✅ 함수형 SetState</h2>
<ul>
<li>
현재 상태와 미래의 상태를 분리
기존 코드
<pre><code>onSubmit = (e) =&gt; {
	e.preventDefalut();
	if (parseInt(this.state.value) === this.state.first = this.state.second) {
		this.setstate({
			result: '정답' + this.state.value,
		})
	}
}
</code></pre>
개선 코드
<pre><code>onSubmit = (e) =&gt; {
	e.preventDefalut();
	if (parseInt(this.state.value) === this.state.first = this.state.second) {
		this.setstate((prevState) =&gt; {
			return {
				result: '정답' + this.prevState.value, // 새로운 상태 값
			}
		})
	}
}</code></pre>
<ul>
<li>예전 상태 값을 다음 상태 값에 적용을 할 수 있다. 즉 명시적으로 표현이 가능하다.</li>
</ul>
<blockquote>
**<code>setState</code>**는 비동기 처리이다. 한 가지 원칙 예전 값을 기준으로 새로운 값을 만드는 경우에는 개선 코드와 같이 리턴을 해주는 함수를 사용하는 것으로 약속을 해야한다.
</blockquote>
</li>
</ul>
<h2 id="-ref">✅ Ref</h2>
<ul>
<li>DOM에 직접 접근 하고 싶은 경우에 사용한다.</li>
<li>포커싱을 잡고 싶은 경우</li>
</ul>
<pre><code>input; // ref를 위한 변수

render() {
	return (
		&lt;React.Fragment&gt;
			&lt;form onSumbit={this.onSubmit}&gt;
				&lt;input ref={(c) =&gt; { this.input = c; } type = 'number' value={this.state.value} onChange={this.onChange}}/&gt;
				&lt;button&gt;입력&lt;/button&gt;
			&lt;/form&gt;
		&lt;/React.Fragment&gt;
	)
}</code></pre>
<blockquote>
setState를 즉, 상태 변경이 일어나게 되면 Render() 함수가 실행된다.
</blockquote>
<code>Render()</code> 너무 많이 일어나게 되면 화면 변화가 생기는 것이므로 성능 저하가 일어난다.
class 컴포넌트에서 함수를 밖으로 빼는 이유도 렌더가 너무 많이 실행 되기 때문이다.
<h2 id="-react-hooks-사용하기">✅ React hooks 사용하기</h2>
<ul>
<li>class 컴포넌트에 비해서 코드량이 많이 줄어든다.</li>
<li><code>Ref</code> hooks 에서는 useRef를 통해 DOM에 접근한다. 이때 <code>current</code>를 명시해준다.</li>
</ul>
<pre><code>const GuGudan = () =&gt; {
	const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
	const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
	const [value, setValue] = React.useState('');
	const [result, setResult] = React.useState('');
	const inputRef = React.useRef(null);

	const onChangeInput = (e) =&gt; {
		setValue(e.target.value);
	}

	const onSubmitForm = (e) =&gt; {
		e.preventDefault();
		if (parseInt(value) === first * second) {
			setResult('정답' + value);
			setFirst(Math.ceil(Math.random() * 9));
			setSecond(Math.ceil(Math.random() * 9));
			setValue('');
			inputRef.current.focus();
		} else {
				setResult('땡');
				setValue();
			}
	}

	return (
		&lt;React.Fragment&gt;
			&lt;div&gt;{first} 곱하기 {second}&lt;/div&gt;
			&lt;form&gt;
				&lt;input ref={inputRef} onChange={onChangeInput} value={value}&gt;&lt;/input&gt;
			&lt;/form&gt;
			&lt;div id="result"&gt;{result}&lt;/div&gt;
		&lt;/React.Fragment&gt;
	)
}</code></pre>
<h2 id="-class와-hooks-비교">✅ Class와 Hooks 비교</h2>
<ul>
<li>State가 바뀌면 함수가 다시 생성 및 실행되기 때문에 class보다 느릴 수 있다.</li>
<li>class는 상태가 바뀌면 렌더 함수가 실행</li>
</ul>
주의 ❗️
React 컴포넌트에서는 태그 내부에 class가 아닌 <code>className</code>으로 사용해야한다. class를 혼동할 수 있기 때문이다.
그와 더 for 속성을 htmlFor 속성으로 표기해주어야한다.
ex) for → labelFor
<blockquote>
React에서 사용할 수 없는 속성은 class와 for이 있다.
</blockquote>
<blockquote>
useState에서 상태를 설정하는 데에는 제한이 없다. 다만 객체를 선언했을 시에 부분 상태 변경에 어려운이 있다.
</blockquote>
<blockquote>
SetState는 SetState를 모아서 한번에 처리한다. 즉 상태변화를 한번에 처리한다.
</blockquote>
<hr>
<h3 id="새로-배운점">새로 배운점</h3>
<blockquote>
Ref와 useRef hooks에 대해서 배울 수 있었다.
</blockquote></div></div>

TheJang story

📌 웹 게임을 만들며 배우는 React 1강
웹 게임을 만들며 배우는 React 1강 강의 내용을 정리한 포스팅입니다.
https://www.inflearn.com/course/web-game-react
✅ 리액트는 왜 사용하는가?
리액트는 SPA(single page Application)
화면 깜빡임이 없다.
거의 앱과 비슷한 느낌이난다.
사용자 인터페이스, 사용자 경험등이 좋아진다.
웹보다는 앱이 사용자 경험이 좋다.
데이터 처리를 쉽게하기 위해서 사용한다.
재활용 가능한 웹 컴포넌트를 만든다.
1) 사용자 경험
2) 재사용 컴포넌트 (중복되는 요소들을 하나로 묶어줄 수 있다.)
3) 데이터-화면 일치
✅ 리액트는 왜 어려운가??
컴포넌트로 만드는 사고 방식이 어렵다.
✅ JSX와 바벨(babel)
JSX : (JS + XML)
content 부분에 중괄호를 사용하면 자바스크립트 코드 작성이 가능하다.
컴포넌트 하나를 만들면 원하는 갯수만큼 쉽게 늘리거나 줄일 수 있다.
✅ 상태
변하는 부분이 상태임을 기억해야한다.
✅ Fragment와 기타 팁
React가 예전에는 컴포넌트도 항상 div로 감싸주어야 했다.
하지만 지금은 <> 빈 태그나 React.Fragement 로 감싸주어 표현할 수 있다.
과거 방식
render() {
 return (
 <div> 
 <div>
 </div>
 </div>
 )
}
현재 방식
render() {
 return (
 <React.Fragment>
 <div>
 </div>
 </React.Fragmet>
 )
}
render() {
 return (
 <>
 <div>
 </div>
 </>
 )
}
class 컴포넌트 함수에서 화살표 함수를 넣어야하는 경우
class 내부 함수에서 화살표 함수가 아닌 function으로 함수 선언식을 사용한다면 this 접근 범위가 달라지기 때문에 화살표 함수를 사용한다.
constructor(props) {
 super(props);
 this.state = {
 value = '',
 }
}
위의 로직이 반드시 필요한 것이 아니다. 실무에서는 아래와 같이 많이 표현한다.
state = {
 value = '',
}
✅ 함수형 SetState
현재 상태와 미래의 상태를 분리
 기존 코드
 onSubmit = (e) => {
 e.preventDefalut();
 if (parseInt(this.state.value) === this.state.first = this.state.second) {
 this.setstate({
 result: '정답' + this.state.value,
 })
 }
 }
 개선 코드
 onSubmit = (e) => {
 e.preventDefalut();
 if (parseInt(this.state.value) === this.state.first = this.state.second) {
 this.setstate((prevState) => {
 return {
 result: '정답' + this.prevState.value, // 새로운 상태 값
 }
 })
 }
 }
예전 상태 값을 다음 상태 값에 적용을 할 수 있다. 즉 명시적으로 표현이 가능하다.
setState는 비동기 처리이다. 한 가지 원칙 예전 값을 기준으로 새로운 값을 만드는 경우에는 개선 코드와 같이 리턴을 해주는 함수를 사용하는 것으로 약속을 해야한다.
✅ Ref
DOM에 직접 접근 하고 싶은 경우에 사용한다.
포커싱을 잡고 싶은 경우
input; // ref를 위한 변수
render() {
 return (
 <React.Fragment>
 <form onSumbit={this.onSubmit}>
 <input ref={(c) => { this.input = c; } type = 'number' value={this.state.value} onChange={this.onChange}}/>
 <button>입력</button>
 </form>
 </React.Fragment>
 )
}
setState를 즉, 상태 변경이 일어나게 되면 Render() 함수가 실행된다.
Render() 너무 많이 일어나게 되면 화면 변화가 생기는 것이므로 성능 저하가 일어난다.
class 컴포넌트에서 함수를 밖으로 빼는 이유도 렌더가 너무 많이 실행 되기 때문이다.
✅ React hooks 사용하기
class 컴포넌트에 비해서 코드량이 많이 줄어든다.
Ref hooks 에서는 useRef를 통해 DOM에 접근한다. 이때 current를 명시해준다.
const GuGudan = () => {
 const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
 const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
 const [value, setValue] = React.useState('');
 const [result, setResult] = React.useState('');
 const inputRef = React.useRef(null);
 const onChangeInput = (e) => {
 setValue(e.target.value);
 }
 const onSubmitForm = (e) => {
 e.preventDefault();
 if (parseInt(value) === first * second) {
 setResult('정답' + value);
 setFirst(Math.ceil(Math.random() * 9));
 setSecond(Math.ceil(Math.random() * 9));
 setValue('');
 inputRef.current.focus();
 } else {
 setResult('땡');
 setValue();
 }
 }
 return (
 <React.Fragment>
 <div>{first} 곱하기 {second}</div>
 <form>
 <input ref={inputRef} onChange={onChangeInput} value={value}></input>
 </form>
 <div id="result">{result}</div>
 </React.Fragment>
 )
}
✅ Class와 Hooks 비교
State가 바뀌면 함수가 다시 생성 및 실행되기 때문에 class보다 느릴 수 있다.
class는 상태가 바뀌면 렌더 함수가 실행
주의 ❗️
React 컴포넌트에서는 태그 내부에 class가 아닌 className으로 사용해야한다. class를 혼동할 수 있기 때문이다.
그와 더 for 속성을 htmlFor 속성으로 표기해주어야한다. 
ex) for → labelFor
React에서 사용할 수 없는 속성은 class와 for이 있다.
useState에서 상태를 설정하는 데에는 제한이 없다. 다만 객체를 선언했을 시에 부분 상태 변경에 어려운이 있다.
SetState는 SetState를 모아서 한번에 처리한다. 즉 상태변화를 한번에 처리한다.
새로 배운점
Ref와 useRef hooks에 대해서 배울 수 있었다.

리액트란 무엇이고? 왜 사용하는가?

댓글