리액트 안에서 변경되어야하는 값은 반드시 state로 선언되어야 한다(ui를 바꾸기 위해서).
- state
UI(사용자가 사용하는 서비스나 제품의 화면 안에 모든 것을 의미)를 바꾸기 위해서 state를 쓴다.
hook : 하나의 기능이다, 리액트 안에서 특정한 기능을 수행하는것들을 기능이라기보단 hook이라고 사용한다. -->useState 훅을 사용하는 방식이구나 - useState(initial) : useState에 initial(초기값)을 넣게 되면 두 가지 값을 배열로 리턴한다
state는 변수 이름
setState는 state를 변경할 수 있는 것
const name = "박준혁"라는 코드가
const [state, setState] = useState("박준혁)으로 바꿀 수 있따.
이것이 state!
- state 훅을 사용하는 방식
- const로 선언
- 빈 배열을 생성[]
- 배열 첫번째엔 state의 이름(변수), 두번째엔 set을 붙이고 state의 이름을 붙인다.
- useState()의 인자에는 이 state의 원하는 처음값을 넣어준다.
+++/ 왜 react안에서는 변수를 const나 let으로 선언하는 게 아니라 state로 상태를 관리할까?
UI를 변경하기위해서, 즉 렌더링을 다시하기 위해서(구체적인건 불변성에서 다룰게요)
✅ useState + onclick : 버튼테그로 눌렀을 때 컨텐츠가 변경되는 것
ui부터 만들어보자
<알아둘 것 : return문 안에 멀티라인(여러줄)을 만들경우 ()를 써야야한다. 한줄이면 ㄴㄴ>
function App() {
const [name, setName] = useState('김할아') //초기값 '김할아'
return (
<div>
{name}
<br />
<button>< /button>
< /div>
);
} 버튼을 눌렀을 때 '김할아'라는 state가 바뀜으로써 {name}이 바뀌게끔 해보겠다.
-->그러려면 버튼을 눌렀을 때 어떤 기능이 일어나야겠져
function App() {
const [name, setName] = useState("김할아") //초기값 '김할아'
return (
<div>
{name}
<br />
<button onclick = {function() {
setName("박할아:)
}}
>
클릭
< /button>
< /div>
);
} state를 변경하는 방법이 setName인데
지금 이 예시에서 한 것은
1. name이라는 state를 통해 이름값을 컴포넌트 내에서 관리를 했다.
2. 이 이름을 setNate이라는 메소드(api)를 통해서 (김할아->박할아)로 바꿨다. = 이 과정을 onclick이랑 엮어봤다.
✅ useState + onchange : input테그 안에서 값을 입력했을 때 컨텐츠가 변경되는 것
function App() {
return (
<div>
과일 : <input />
< /div>
);
} function App() {
const [fruit, setFruit] = useState('')
return (
<div>
과일 : <input
value = {}
onChange = {function(event){
console.log("event",event.target.value)
setFruit(event.target.value)
}}
/>
< /div>
);
} -
value는 input에 입력되는 값이 뭐냐(값을 state로 할것이기에 fruit로 연결해주면 된다 -> value ={fruit}
-
onChange라는 것은 무엇이냐면 input테그 안에서 어떤 타이핑이 일어날때 어떻게 할 것이냐(값이 잘 들어오는지 확인하는 것) --> 값이 잘 들어온다면 setFruit를 통해서 fruit에다가 그 값을 넣어주기만 하면 끝
-
onChange에는 항상 event가 매개변수로서 딸려오는데 콘솔에 찍어보면 event는 객체라는 것이고 그 안쪽을 더 살펴보려면 event.target.value를 하면 타이핑때마다 값이 저장이 되는 것을 알 수 있다.
즉, 이벤트 객체 안의 타겟 객체 안의 value라는 값으로 우리가 타이핑 하는 것들이 매개변수로 들어온다 -
이제 이 event.target.value를 우리가 setFruit를 해주면 된다.
-->setFruit(event.target.value)
순서 흐름 한눈에 파악하기위해 제가 자료하나를 제공하겠습니다
-1. 타이핑 치는 순간 onchange함수를 호출
-2. event.target.value에 내가 입력한 값이 들어간다,
-3. 그 값이 setFruit()에 들어가고
-4. setFruit를 하게 되면 state인 fruit에 저장이 되며
-5. fruit는 input에 값을 재할당한다.
=>여기서 알 수 있는 것
값이 잘 출력이 되면 input태그와 sate와 값을 잘 동기화 한 것!
