일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- unity
- 유니티
- 마이크작동
- button
- 깃허브오류
- 노션활용
- 1인 게임개발
- 노션꿀팁
- unrelated histories
- RPG게임
- 갤럭지버즈+
- Relation
- 노션가계부
- 커밋
- notion
- 노션
- 깃허브 커밋
- 노션관계형
- flutter오류#flutter#flutter초기세팅
- props
- JSX
- React
- 노션으로 가계부쓰기
- 깃허브 #깃명령어
- 블루투스마이크
- animatorcontroller
- button onclick
- 깃허브
- 마이크작동안됨
- Today
- Total
광산김가네
[모각코]ReactJS 시작하기(4)_state 함수,props까지 본문
이번시간에는 다음시간에 이어 setState함수에 이어서 state에 대해서 더 알아보았다
컴포넌트의 핵심키워드중하나인 props까지 학습해보았다.
1.useState 사용하기 리뷰
const [ counter,setCounter] = React.useState(0);
위의 코드처럼 useState의 반환값 두개를 1.바꿔줄 변수 2.바꿔줄 변수를 다루는 함수 이름을 선언해줘서
사용한다.
여기서 setCounter와 같이 바꿔줄 변수를 다루는 함수는 크게 두가지 방식으로 사용한다
1. 인자로 변경될 내용 작성
setCounter(변수의 변경내용) 이런식으로 쓰는데
setCounter(10000)으로 정적인 데이터를 넣어주거나
setCounter(counter+1) 변수를 포함한 식으로 넣어줄수있다
2. 화살표 사용하기
setCounter((current)=>current+1);
사실 setCounter(counter+1)과 같은 표현이다.
근데 리액트에서는 더 안전하고 정확한 표현을 반환할수있는 표현식이라고한다!
"현재값"을 바탕으로 업데이트한다! 라는 표현이라 혼동을 주는걸 방지해주는 그런 확실한 표현이라고 한다.
2.사용자 Input으로 state 조절하기
노마드코더 강의에서는 단위 변환기를 만들어보았다 코드는 아래와같다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<script src = "https://unpkg.com/react@16.7.0/umd/react.development.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/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();
const onChange = () =>{
console.log("somebody wrote");
};
return(
<div>
<h1>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}</h4>
<label htmlfor="hours">Hours</label>
<input for="hours" placeholder="Hours" type = "number"/>
</div>
);
const root = document.getElementById("root");
ReactDOM.render(<App />,root);
}
</script>
</html>
이 예제에서는 리스닝하는 이벤트자체가 onChange라서 딱히 setMinutes에 대한 설정은 안해줬다.
3.props
다음 강좌를 듣기앞서 구글링을 통해 먼저 props에 대해 알아보았다.
properties(속성)의 줄임말로 컴포넌트끼리 값을 전달할때 사용하는 얘이고
수정할수없다는 특징을 가지고있다
예제를 통하여 간단하게 props의 사용방법을 알아보았다
다음은 APP 컴포넌트에서 Main컴포넌트에 name으로 선언해준 프로퍼티를 넘겨준 예제이다
App.js
import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';
function App() {
return (
<div>
<Header />
<Main name="갓대희"/>
<Footer />
</div>
);
}
export default App;
출처: https://goddaehee.tistory.com/300 [갓대희의 작은공간:티스토리]
Main.js
import React from 'react';
function Main(props) {
return (
<div>
<main>
<h1>안녕하세요. {props.name} 입니다.</h1>
</main>
</div>
);
}
export default Main;
출처: https://goddaehee.tistory.com/300 [갓대희의 작은공간:티스토리]
Main.js에서 props. name으로 앞서 name에 선언해준 이름을 불러오는 예제이다
'TIL(Today I Learn)' 카테고리의 다른 글
[모각코]React 시작하기(6)_create-react-app (0) | 2022.08.06 |
---|---|
[모각코]ReactJS 시작하기(5)_props (0) | 2022.08.05 |
[모각코]React Js 시작하기(3)_state에 대해서 (0) | 2022.07.29 |
[모각코]React Js 시작하기(2) (0) | 2022.07.25 |
[Python]파이썬으로 엑셀 데이터 다루기_openpyxl 라이브러리 (0) | 2022.07.13 |