React는 예전에 잠깐 다뤄봤었던 기억이 있다.
하지만 다 까먹었으므로 노마드코더의 무료강의와 공식문서 튜토리얼을 통해 다시 기억을 되살려 보려 한다.
https://ko.reactjs.org/tutorial/tutorial.html
빠르게 학습 하던 rust보다는 천천히 정확하게 진행할 예정이다.
1. React의 필요성
react는 반응형 페이지를 쉽게 만들어 준다는 장점이 있다. 일반적인 JS코드와 비교했을 때 같은 기능을 하는 것을 매우 간단하게 만든다.
(프레임워크라는게 일반적으로 그렇다)
2. JSX
자잘한 것은 넘어가고 바로 JSX로 넘어가자.
JSX란 JavaScript를 확장한 문법으로서 react로 createElement를 사용할 때, html에서 했던것처럼 비슷하게 작성할 수 있다는 장점이 있다.
2.1 React 방식
const h3 = React.createElement(
"h3",
{
onMouseEnter: () => console.log("mouse entered"),
},
"Hello , I'm a span"
);React로 작성할때는 다음과 같이 요소를 생성한다.
2.2 JSX 방식
const Title =
(<h3 id ="title" onMouseEnter={() => console.log("mouse entered")}>
"Hello , I'm a title"
</h3>
);처음 배우는 내가 봐도 아래 부분이 훨씬 직관적이다. html에서 쓰듯이 코드를 작성하기 때문이다.
2.3 Babel
하지만 여기서 문제가 발생한다.
JSX는 간편한 문법이지만 브라우저가 이 코드를 이해하지를 못한다.
이때 쓰이는 것이 Babel로서 코드를 변환해주는 기능을 가지고 있다.
즉 2.2에서 적은 JSX코드를 2.1의 React코드로 변경해준다.
JSX -> Babel -> React
코드를 변환하는 과정으로 인해 로딩이 느려지는건 아닐까 싶지만,
standalone 말고 다른방식으로 하면 더 빠르다고 한다.
2.4 직관성
그래서 이런 약간의 눈속임 같은 행위가 어떻게 이득이 되는지 궁금했었는데 ,
아래의 코드를 보고 깨달았다.
React버전
const container = React.createElement("div",null,[Title , btn]);JSX버전
const Container = ()
<div>
<Title/>
<Btn/>
</div>차이가 느껴지길 바란다. 위에가 더 쉽다면 굳이 JSX버전으로 할 필요는 없을것 같다.
3. State
React에서 State란 무엇인가?
바로 데이터다.
변경되는 데이터를 표현하기 위해서 약간 안좋은 방법을 먼저 살펴보자.
function countUp(){
counter = counter +1;
render();
}
function render(){
ReactDOM.render(<Container/>,root);
}여기서는 두가지 함수가 사용되었다.
첫번째는 countUp , counter를 늘리고 render를 호출한다.
두번째는 render , 페이지를 업데이트 하는 함수이다.
꽤 아름답게 작동하지만 더 나은 방법이 있을 것 같다.
예를들면 render()를 굳이 사용하지 않아도 counter가 변하면
자동으로 render가 된다던지.
React에서 데이터를 사용하는 방식은 다음과 같다.
const [counter, modifier] = React.useState(0)useState의 인자는 counter의 초기값이다.
3.1 Modifier
결국 목표는 ReRendering의 자동화인데 , 그것을 modifier가 해준다.
const [counter,modifier] = React.useState(0);
const onClick = () =>{
modifier(counter +1);
};위와 같은 코드에서 , modifier는 인자로 들어온 값을 counter로ㄴ 바꿔준 후에, rendering까지 자동으로 진행한다.
counter = counter + 1;
ReactDOM.render();의 두줄이 modifier 하나로 실행되는 것이다.
매우 편리한 기능이다.
3.1.1 Modifier의 두가지 사용법
정확히 말하면 state를 바꾸는 두가지 경우이다.
첫 번째는 위의 경우처럼 진행하는 것인데,
modifier((current)=>current+1);아래의 방식으로 진행할 때 조금 더 안전하다고 한다.
똑같은 문장이지만 , current가 확실히 현재의 값임을 보장하기 때문이다.
3.2 단위 변환 연습
기본이 되는 것은 React에서 , html에서 input의 변화를 통해 State를 설정하는 방법이다.
function App() {
const [minutes, setMinutes] = React.useState();
const onChange = (event) => {
setMinutes((current) =>event.target.value);
}
return(
<div>
<h1 className="hi">Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
/>
<h4>You want to convert {minutes} minutes to hours</h4>
<label htmlFor="hours">Hours</label>
<input id="hours" placeholder="Hours" type="number"/>
</div>
);
}input의 value 속성을 통해 받는 값을 minute로 지정하고 , rendering을 위해 modifier를 사용했다.
이런 경우에서 modifer에 함수 형태를 작성할 필요는 없지만 복습하는 겸 작성했다.
간단하게
setMinutes(event.tagrget.value)로 설정해도 문제는 없다.
위 예제에서 중요한 것은, value={minutes}를 통해 input을 react의 State에 연결했다는 점이다.
이 방식을 통해 어디에서나 minutes에 접근할 수 있게 된다.
const onResetClick = () =>{
setMinutes(0);
}<button onClick={onResetClick}>Reset Button</button>이런게 가능하다는 뜻이다.
3.3 Component , State
하나의 App에서 State를 통해 다른 Component를 rendering 할 수 있다.
function App() {
const [converter,setConverter] = React.useState("Time");
const onSelect= (event) =>{
setConverter(event.target.value);
}
return(
<div>
<h1 className="hi">Super Converter</h1>
<select onChange={onSelect}>
<option value="Time">Minutes & Hours</option>
<option value="Weight">Grams & KiloGrams</option>
</select>
<hr/>
{converter=="Time" ? <TimeConverterApp/> : <WeightConverterApp/>}
</div>
);
}위 코드는
이렇게 선택에 의해 두가지 다른 App을 rendering 한다.
여기서 사용되는 것이 Converter를 선택하는 State이다.
State는 여기까지 , 다음 작성글 부터는 props(?) 에 대해 배운다.
아마 properties가 아닐까 예상중
