목차
- Understaging State
- setState
- recap
- State Functions
- Inputs and State
- State Practice
understanding state
counter 변수 처리
<!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");
// counter 함수 선언 , 초깃값 0으로 세팅
let counter = 0;
// countUP 함수 선언 : counter 1씩 증가
// render() -> container 함수 리렌더링 하는 효과 ( ui에 변한 container 보여준다고 생각)
function countUP() {
counter = counter + 1;
render();
}
// render 함수 선언
function render() {
ReactDOM.render(<Container/>, root);
}
// reactjs에서 변수 전달 :{변수_이름}
// reactjs에서 이벤트 처리 :{함수_이름}
const Container = () => (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={countUP}>Click me</button>
</div>
);
// container 함수 렌더링 container 보여줘
render();
</script>
</html>- reactjs 에서 counter 변수 전달 ?
<h3>Total clicks: {counter}</h3>=> 중괄호 안에 counter 변수
- 버튼 눌렀을 시 counter 증가 구현
1) countUp 함수 선언
2) button 이벤트 처리
<button onClick={countUP}>Click me</button>- 렌더링 과정
1) counter = 0 실행
2) 페이지 로드 시 container 뒤 render() 실행 <- 함수는 다 건너 뛰니깐
container 컴포넌트 렌더링. 즉, react element가 된다.
counter = 0 인 상태 + 이벤트 리스너 = counter 1씩 증가.
3) container 리렌더링
counter 1씩 증가한 상태 , total click : {새로운 버전의 counter}
reactjs에서는 counter 숫자,바뀐 부분만 update 된다.
=> 이 방법은 비추천
setState
- state : 기본적으로 데이터가 저장되는 곳
- useState : [data,function] = [변수,set변수]
여기에서 javascript 배열 문법 참고 ! -> useState 원리
const animals = ['호랑이', '사자', '고양이'];
console.log(animals[1]); //사자
const [first, second, third] = animals;
console.log(second); //호랑이 function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter(counter + 1);
}
return(
<div>
<h3>Total clicks : {counter}</h3>
<button onClick={onClick}>Click me!</button>
</div>
);
} 설명 :
1)counter라는 데이터를 받아서, return()에 그 데이터를 담고 있다.
즉, 사용자가 보게 될 컴포넌트이다.
2) 버튼이 클릭되면, counter값을 바꿔줄 함수를 호출
3) counter의 새로운 값을 가지고 해당 함수 호출
Recap
reactjs 의 역할 : 데이터가 바뀔때마다 컴포넌트를 리렌더링 하고 ui에 refresh.
modifier 함수를 사용해 state (=어플리케이션 data) 바뀔때 컴포넌트가 재생성.
State functions
state 변경하는 방법
1. 직접 할당 : setState(state + 1) -> 과거 state로 계산 => 비추
2. 함수를 할당 : setState( (state) => state + 1) -> 현재 state로 계산
Inputs and State
<!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">
function App() {
const [minutes, setMinutes] = React.useState();
// 이벤트시, 값 update
const onChange = (event) => {
setMinutes(event.target.value);
}
return(
<div>
<h1 className="hi">Super Converter</h1>
<label htmlFor="minutes">분</label>
<input
value={minutes}
id="minutes"
placeholder="분"
type="number"
/* ui에 update -- 리렌더링 */
onChange={onChange}
/>
<h4>You want to convert {minutes}</h4>
<label htmlFor="시간">Hours</label>
<input id="hours" placeholder="시간" type="number"/>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>-
jsx에서의 html 태그
input 태그가 나오면 value, onChange 속성을 붙여서 상태 관리 -
onChange : input에 변화가 생길때 호출
- setMinutes(event.target.value) : minutes 변수를 값 변경
- event.target.value: 현재 input 값 확인
유의사항
{/* JS */}
<label for="minutes">Minutes</label>
<input class="minutes" id="minutes" placeholer="Minutes" type="number" />for, class 등 property는 자바스크립트용
{/* JSX */}
<label htmlFor="minutes">Minutes</label>
<input className="minutes" id="minutes" placeholer="Minutes" type="number" />htmlFor, className 등 으로 변경 필요 !
State Practice (1)
recap :
1) state 생성
// setState의 결과 배열 ! [ data , modifier 함수]
const [ minutes, setMinutes ] = React.useState();2) input의 value과 state 연결
value={minutes} 어디서나 input value 수정 가능
3) onChane 함수 생성
데이터( minutes) 업데이트 역할
change 이벤트가 일어났을때 ( = 사용자가 input에 입력할때)
onChange 실행 ->event.target.value = input value
<script type="text/babel">
function App() {
const [minutes, setMinutes] = React.useState()
const onChange = (event) => {
setMinutes(event.target.value);
}
const reset = () => setMinutes(0);
return(
<div>
<h1 className="hi">Super Converter</h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={Math.round(minutes / 60)}
id="hours"
placeholder="Hours"
type="number"
/>
</div>
<button onClick={reset}>Reset</button>
</div>
);
}
</script>- 분단위-> 시단위
<div>
<label htmlFor="hours">Hours</label>
<input
/*round 소수점 반올림 */
value={Math.round(minutes / 60)}
id="hours"
placeholder="Hours"
type="number"
/>
</div>2.reset 버튼
// setMinutes를 가지고 minutes state을 0으로 초기화
const reset = () => setMinutes(0);// 리셋 버튼 만들기
<button onClick={reset}>Reset</button>참고자료
https://seons-dev.tistory.com/category/FRONT-END/ReactJS%20Clone%20project
자세한 설명
https://exciting-wildebeest-b2c.notion.site/React-1-3bf022f85e434a08b1bd835c1cbf4426
멋사 스터디 자료
https://itwithruilan.tistory.com/category/%EA%B7%B8%20%EB%95%90%20Front%ED%96%88%EC%A7%80
간단한 설명
