3. STATE
React js UI 바뀐 부분만 업데이트해주고 있음
바뀐 부분만 업데이트 해주면 됨! => 인터렉티브한 어플
우리 필요한거 - 데이터가 바뀔 때마다 Container의 리렌더링
1)컴포넌트, JSX 변수 추가하고 싶을 떄
{counter} 매우 간단
2) UI 업데이트 부분 보여주고 싶다면, render 함수 다시 호출
setState
👉 리렌더링 발생시킬 가장 좋은 방법
modifier 함수 그 값 업데이트 -> 리렌더링(화면 refresh)
-> modifier 함수 이용해 컴포넌트 state 바꿀때, 컴포넌트 새로운 값(재생성), 다시 렌더링(리렌더링)!
State Functions
사용자 input 어떻게 받는지, form을 만들었을 때 state 어떤 식 작용
state 바꾸는 2가지 방법
setCounter(counter+1); //1.직접 값 설정
setCounter((current) => current+1);//2.함수 전달하기👏둘 다 현재 state로 새로운 값 계산 BUT 아래쪽 방법 안전
current가 확실하게 현재 값이라는 것을 보장(예상치 못한 업데이트 혼동 방지)
Inputs and State
- for 은 JavaScript 용어--이미 선점된 단어
- Input의 value를 바탕으로 component 업데이트
과정 간단 요약
1)state 만들음 - setState 결과 array
2)input의 value를 state로 연결 (어디서든 value 수정 가능)
3)onChange 함수 - 데이터 업데이트 역할
"onChange 삭제? state연결 input 남아있음"
단위 변환 뒤집어보는 함수 (flip function)
: 단순히 true 혹은 false 변수
✍ 시간 변환
function MinutesToHours(){
const [amount, setAmount] = React.useState();
const [flipped, setFlipped] = React.useState(false);//state 결과값 array [array 첫번째 아이템,데이터 수정 함수]
const onChange = (event) => {
setAmount(event.target.value);
};
const reset = () => setAmount(0);
const onFlip = () => {
setFlipped((current) => !current);
reset();
}; // flipped이 true, false 변환! "반대 도출 명령" , reset함수 - flip할 때마다 변환 값 바뀌어서 작성했다
return(
<div>
<h1>Converter</h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={flipped ? amount*60 : amount} //삼항연산자 " flipped 상태라면, state 있는 값 그대로 보여줘라! 아니라면? 반대"
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
disabled={flipped}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={flipped ? amount : amount/60}
id="hours"
placeholder="Hours"
type="number"
disabled={!flipped}
onChange={onChange}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>Flip</button>
</div>
);
}✍ 분/시간 변환기 + 마일/킬로미터 변환기
=> 추가학습은 크게 없음,,, 작은 컴포넌트로 분할(분할정복)
function App(){
const [index, setIndex] = React.useState("xx");
const onSelect = (event) => {
setIndex(event.target.value);
};
return(
<div>
<h1>Super Converter</h1>
<select value={index} onChange={onSelect}>
<option value="xx">Select your units</option>
<option value="0">Minutes & Hours</option>
<option value="1">Km & Miles</option>
</select> //=> select의 change event 리스닝 사용자 번호 선택? setIndex이용 숫자 state안에 넣
// if 데이터 수정 위해 modifier 함수 사용? 컴포넌트 새로운 데이터와 새로고침
<hr/>
{index === "xx" ? "Please select your unit." : null} //{}안에서 JS 사용 가능
{index === "0" ? <MinutesToHours/> : null}
{index === "1" ? <KmToMiles/> : null}
</div>
);
}4. Props
: 부모 컴포넌트로부터 자식 컴포넌트에 데이터 보낼 수 있게 해주는 방법
😂 현재 컴포넌트 내 몇개의 text만 다름(복붙)-> style 모두 갖는 한가지 컴포넌트 만들면 좋겠다!
function SaveBtn(){
return <button style={{
backgroundColor : "tomato",
color:"white",
padding:"10px 20px",
border: 0,
borderRadius:10,
}}>Save Changes</button>
}
function ConfirmBtn(){
return <button style={{
backgroundColor : "tomato",
color:"white",
padding:"10px 20px",
border: 0,
borderRadius:10,
}}>Confirm</button>
}- prop이 2개이상, 컴포넌트의 인자값을 {} 중괄호 안에 넣어 작성
- onClick은 이벤트 리스너가 아니라 하나의 prop,
prop 이름 자유롭게 설정 가능, 원하는 곳 작성되어야 기능함
✍props
function Btn(props){
console.log(props)
return <button style={{
backgroundColor : "tomato",
color:"white",
padding:"10px 20px",
border: 0,
borderRadius:10,
}}>Save Changes</button>
} //props는 Btn 전달받는 첫번째이자 유일한 인자, 오브젝트
function App (){
return(
<div>
<Btn banana="Save Changes" /> //어떤 prop이든, Btn컴포넌트 보내면 Btn함수 첫번째 argument!
<Btn banana="Continue" />
</div>
);
}-
Props: Btn 전달받는 첫번째이자 유일한 인자, 오브젝트
if) prop의 이름을 변경한다면? 컴포넌트 이름도 동시에 바꿔야 함prop 전달할 때 이름, 받아서 사용할 때 이름 동일해야 함!
MEMO
👉 뭐든 여기에 prop으로서 넣는다고 하면, 자동적으로 return에 들어가지는 않음
- 부모 state 변경 -> 모든 자식 새롭게 다시 그려짐 (re-render) "추후 어플리케이션 느려지는 원인일지도"
- 부모의 상태를 바꾸는 함수 -- 자식이 실행한다.
Prop Types
문제) 컴포넌트를 가지고 있는데 너무 많은 props를 가질 경우 발생
- Prop Type : 어떤 타입의 prop을 받고 있는지 체크 해줌
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>설치 후,
Btn.propTypes = {
text: PropTypes.string,
fontSize: PropTypes.number,
}👉 props 타입이 뭐고, 어떤 모양인지 설명해줄 수 있음
이와 같은 경고 문구 나타남!!
seughoria