1. Props
똑같은 특성으로(색, 백그라운드 컬러, 패딩,,,) object를 만들고 싶은데 계속 특성을 복사 붙여넣기 할 수 없을 때, 특성을 function으로 만들고 props를 붙여주면 됨.
function Btn() {
return <button style={{
backgroundColor: "tomato",
color:"white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}></button>
}이런 특성으로 버튼을 여러개 만들고 싶으면
function App() {
return (
<div>
<Btn banana="Save Changes"/>
<Btn banana="Continue"/>
</div>
);
}이런식으로 props를 만들어주는 것임.
banana는 text를 대체한건데, 저기다가는 뭘 써도 상관이 없음
그리고 저 banana라는 props를 위에 function에다가 갖다 붙이면 됨.
function Btn({banana}) {
return <button style={{
backgroundColor: "tomato",
color:"white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}>{banana}</button>
}전체코드
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.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 Btn({banana, big}) {
return <button style={{
backgroundColor: "tomato",
color:"white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize: big ? 18:15,
}}>{banana}</button>
}
function App() {
return (
<div>
<Btn banana="Save Changes" big={true}/>
<Btn banana="Continue" big={false}/>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
true false를 보내서 if else 구문을 사용해서 fontSize를 조절할 수 도 있음.
2. Memo
만약
function App() {
const[value, setValue] = React.useState("Save Changes");
const changeValue =() => setValue("Revert Changes");
return (
<div>
<Btn text={value} changeValue={changeValue} />
<Btn text="Continue" />
</div>
);
}이런식으로 코드를 작성해서, setValue가 실행되면, value의 상태를 바꾸는 코드가 있다면 부모 컴포넌트가 const들이고, 자식 컴포넌트가 return안에 있는 애들인데, 부모 컴포넌트의 상태가 바뀔 때마다 자식 컴포넌트도 변화함. (웹이, 앱이 느려지는 원인일수도)
근데 내가 save changes는 바꾸고 싶은데 continue는 랜더링 안하길 바라면 어떻게 해야함?
Memorize 시켜야함.
const MemorizeBtn = Reacr.meno(Btn)이러면 바뀌지 않은 컴포넌트는 랜더링하지 않음.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.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 Btn({text,changeValue}) {
console.log(text, "was rendered")
return (<button
onClick ={changeValue}
style={{
backgroundColor: "tomato",
color:"white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}>{text}</button>
)
}
const MemorizeBtn = React.memo(Btn)
function App() {
const[value, setValue] = React.useState("Save Changes");
const changeValue =() => setValue("Revert Changes");
return (
<div>
<MemorizeBtn text={value} changeValue={changeValue} />
<MemorizeBtn text="Continue" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
메모 하기 전
메모 한 후 (컨티뉴는 바뀌지 않았기 떄문에)
3. Prop Type
prop type는 사용자가 어떤 타입의 prop을 받고 있는지를 체킹해주는 패키지
"https://unpkg.com/prop-types@15.7.2/prop-types.js"
Btn.propTypes ={
text:PropTypes.string,
fontSize: PropTypes.number,
}이렇게 사용하면 text는 스트링이어야하고 fontSize는 number여야한다는 것을 알려줌 에러메세지로
function App() {
return (
<div>
<Btn text="Save Changes" fontSize={18}/>
<Btn text={14} fontSize={"continue"}/>
</div>
);
}이런 상황에서
이렇게
전체 코드
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.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 src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script type="text/babel">
function Btn({text,fontSize =16}) {
return (<button
style={{
backgroundColor: "tomato",
color:"white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize,
}}>{text}</button>
)
}
Btn.propTypes ={
text:PropTypes.string,
fontSize: PropTypes.number,
}
function App() {
return (
<div>
<Btn text="Save Changes" fontSize={18}/>
<Btn text={14} fontSize={"continue"}/>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
배움이 즐거운 개발자