23/11/09 til 리액트 숙련주차(2)
2023. 11. 9. 13:38ㆍ카테고리 없음
import "./App.css"; // 스테이트와 알이에프 서로다른 훅 비교 로직
import styled from "styled-components";
import { useEffect, useState } from "react";
import { useRef } from "react";
const style = { border: "1px black solid", margin: "5px", padding: "5px" };
function App() {
const ref = useRef("초기값"); //{current : 초기값} 이런식의 커런트라는 키를가진 객체가 됨
const [count, setcount] = useState(0); //유즈카운트 셋카운트를 할때마다 리랜더링
const plusbtn = () => { //플러스버튼을 누르면 리랜더링되면서 카운트가 올라감
setcount(count + 1);
};
const refbtn = () => { //그런데 레프 버튼은 안올라감 브라우저상으로
ref.current++; //콘솔로그를 찍어보면 상승함
};
return (
<>
<div style={style}>
스테이트 영역입니다. {count}
<br />
<button onClick={plusbtn}>스테이트 증가</button> //온클릭에 함수줌
</div>
;
<div style={style}>
레프 영역입니다. <br />
{ref.current} //레프는 객체 이기 때문에 키값까지 달아줘야 벨류값이 나옴
<button onClick={refbtn}>레프 증가</button>
</div>
</>
);
}
export default App;
import "./App.css"; //유즈알이에프에 대해 좀더 알아보자
import styled from "styled-components";
import { useEffect, useState } from "react"; // 화면이 첫랜더링 됐을때 id에 포커싱이 되고 id에 10글자
import { useRef } from "react"; //입력하면 패스워드로 포커싱되는 로직을 만들자
function App() {
const idref = useRef(""); //아이디 알이에프
const pswdRef = useRef(""); //패스워드 알이에프
const [id, setid] = useState("");
useEffect(() => { //요 유즈 이펙트로 첫랜더링시
idref.current.focus(); //아이디에 포커싱 되게함 // 아이디 인풋태그에 알이에프 달아야함
}, []);
useEffect(() => { //요거는 아이디가 10글자가 되는순가 패스워드 포커싱되게
if (id.length >= 10) {
pswdRef.current.focus();
}
}, [id]); //id 변화에 맞춰야 되니 대괄호에 아이디 넣는다.
return (
<div>
<div>
아이디 :{" "}
<input
value={id}
onChange={(i) => setid(i.target.value)} //온체인지에 패스워드로 포커싱옮기는 함수 넣어도 되는데
type="text" //그렇게 하면 배치성 이라서 11글자가 되야 작동된다함//???
ref={idref} //알이에프에 아이디 알이에프를 준다.
/>
</div>
<div>
패스워드 : <input type="password" ref={pswdRef} />
</div>
</div>
);
}
export default App;
//익숙하지 않아서 어렵다.
import "./App.css"; //컴포넌트 들의 프롭스 로직
import styled from "styled-components";
import { useEffect, useState } from "react"; //훅은 여기선 안씀
import { useRef } from "react";
const style = { // 요건 css임
color: "red",
fontweight: "900",
};
function App() { //일단 앱컴포넌트에서 자식컴포넌트인 그랜드파더호출
return <GrandFather></GrandFather>;
}
export default App;
function GrandFather() { //그랜드파더 컴포넌트에서 홈네임과 머니를 선언
const HomeName = "우리집";
const money = 50000;
//파더컴포넌트를 호출하면서 파더에다가 홈네임고 머니를 전달 return <Father HomeName={HomeName} money={money}></Father>;
}
function Father({ HomeName, money }) { //파더에서는 파라미터부분에 홈네임과
return <Child HomeName={HomeName} money={money} />; //머니를 프롭스로 받고 요걸
} //요걸 차일드 컴포넌트에 전달
function Child({ HomeName, money }) {
return ( //그랜파 컴포넌트에서 설정한걸 프롭스로 전달두번 받음
<div> //그 프롭스로 텍스트 출력
나는 꼬맹이 할아버지가 말한 집이름은 <span style={style}>{HomeName}</span>
<br />
용돈으로 <span style={style}>{money}</span>주셨어요{" "}
</div>
);
}
//기본적인 프롭스 전달 인데 파더컴포넌트는 전달 역할 밖에 못함 그래서 크리에이트컨텍스트를 사용
import "./App.css"; //요게 크리에이트컨텍스트 예제
import styled from "styled-components";
import { createContext, useContext, useEffect, useState } from "react"; //크리에이트 컨텍스트 임포트
import { useRef } from "react";
const style = {
color: "red",
fontweight: "900",
};
const Familycontext = createContext(null); //그랜드파더 컴포넌트에서 사용할 크리에이트컨텍스트선언
//요거 대문자로 써야하나?function App() {
return <GrandFather></GrandFather>;
}
function GrandFather() {
const HomeName = "우리집"; //위예제랑 동일하게 홈네임 머니 설정
const money = 50000;
return (
<Familycontext.Provider //여기서 파더 태그를 패밀리컨텍스트.프로바이드 태그로 묶고
value={{ //전달할 벨류를 객체형식으로 전달 키와 벨류가 같으므로
HomeName: HomeName, //하나 지워도 됨
money: money,
}}
>
<Father></Father>; //파더컴포넌트에 프롭스 전달할 필요 없음
</Familycontext.Provider>
);
}
function Father() { //이제 프롭스로 받을 필요가 없으므로 프롭스 다지워
return <Child />;
}
function Child() {
const data = useContext(Familycontext); //패밀리컨텍스트를 유즈 컨텍스트 훅으로 받는다.
return (
<div>
나는 꼬맹이 할아버지가 말한 집이름은{" "}
<span style={style}>{data.HomeName}</span>
<br />
용돈으로 <span style={style}>{data.money}</span>주셨어요{" "}
</div>
); // 객체형이니까 data.어쩌고 형식으로 받는다.
}
export default App;
//이게 쓸데없이 프롭스 드릴링을 막을수 있다고 하는데 남발하면 안좋다고 하심