1. re-render
- 데이터를 수정하는 함수가 불려질 때 re-render 된다.
<script>
function App() {
const [value, setValue] = React.useState("Save Changes");
const chageValue = () => setValue("Revert Changes");
return (
<div>
<Btn print={value} onClickThen={chageValue} />
<Btn print="Confirm" />
</div>
);
const MemorizedBtn = React.memo(Btn)
function App() {
const [value, setValue] = React.useState("Save Changes");
const chageValue = () => setValue("Revert Changes");
return (
<div>
<MemorizedBtn print={value} onClickThen={chageValue} />
<MemorizedBtn print="Confirm" />
</div>
);
</script>- React.memo 를 이용해서 상태변화가 일어나지 않으면 re-render도 일어나지 않도록 할 수 있다.
- 이렇게 re-render를 제어해주는 이유는 부모가 state 변경이 있으면 모든 자식들은 re-render 되는데, 애플리케이션 속도 저하의 원인이 될 수 있기 때문에 컴포넌트의 re-render를 제어시켜준다.
- 이 코드에서 Btn 이라는 컴포넌트는존재한다고 생각을 하고,
- React.memo를 사용하는 새로운 컴포넌트를 생성해주어 기존의 Btn을 MemorizedBtn 으로 치환
-prop가 변했다 -> state가 변했다
2. propTypes 로 type 검사
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
# print에는 string 타입이, fontSize에는 number 가 들어가야된다고
Btn.propTypes = {
print: PropTypes.string,
fontSize: PropTypes.number,
};
function App() {
return (
<div>
<Btn print={"Sava Changes"} fontSize={22} />
<Btn print={22} fontSize={"Continue"} />
</div>
);
}3. prop.key값은 안쓴다! {key값}으로 간단하게 표현하자
- 충격.. 난 강의들으면서 좀 다르게 해봐야지~ 생각하면서 props.print, props.isDone 이런식으로 썼는데 이렇게는 잘 안쓴다고 한다..
- {필요한 key값} 이렇게 props를 써야겠다
4. useEffect
-
useEffect 에는 2개의 argument가 있는데
-
첫번째 argument에는 딱 한 번만 실행하고 싶은 코드
-
두번째 argument에는 state 값을 적어주고 이 state값이 변할 때만 실행하고 싶은 코드
-
state값이 변경되면서 re-rendering 되지만, useEffect를 사용해서 계속해서 re-rendering 되지않고 한번만 실행시키는 함수를 만들 수 있다.
-
useEffect를 이용해서 state가 변함에 따라 계속해서 re-rendering 되지 않고 한 번 실행으로 끝날 수 있게 보호막을 쳐준다.
-
두번째 argument에 state 명을 적어줌으로써, React에게 "이 state값을 지켜보고, 변화할 때마다 코드를 실행시켜줘" 라고 알려주는 것!
-
useEffect 이해 하는 코드
function App() {
const [counter, setValue] = useState(0);
const [keyword, setKeyword] = useState("");
const onClick2 = () => setValue((prev) => prev + 1);
const onChange2 = (event) => setKeyword(event.target.value);
useEffect(() => {
console.log("i run only once (like call API only once");
}, []);
useEffect(() => {
if (keyword !== "" && keyword.length > 5) {
console.log("i run when 'keyword' changes");
}
}, [keyword]);
useEffect(() => {
console.log("i run when 'counter' changes");
}, [counter]);5. input tag 사용시 주의사항
이렇게 안쓰고
{props} 이렇게 쓰니깐
Error: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
이런 경고 창이 나타났다.
input 태그는 자식을 가질 수 없는데 {props} 이렇게 자식을 적어줘서 이렇게 Error 메세지를 보내줬다.
해결 방법으로는 input 태그 안에 value를 이용해서 적어주면 된다.
<input value={props} />
or
<input value={props}></input>6.
- component는 단지 jsx를 return 하는 function이다.
- componenct를 사용할 때는 대문자로 시작한다.
- React에서 {} 를 사용해서 javascript 문법을 사용한다.
7. cleanup function
- 컴포넌트가 destroy 될 때, 실행되는 함수
- 자주 사용 하진 않음. 보통 useEffect 함수 안에 다 작성
function Hello() {
useEffect(() => {
console.log("created !");
return () => console.log("destroyted -.-");
}, []);
return <h1>This is Hello component</h1>;
}
여기서 Hello 컴포넌트를 클릭하면 creact 가 콘솔창에 출력되고
destroy하면 destroyed -.- 이 출력된다..
신기하네.. return값이 함수를 호출할 때 같이 출력되는 것이 아니라
clean(destroy)될 때 출력된다.
활용 예시는 컴포넌트가 사라질 때 event listener를 지우거나, console.log에 뭔가 보여주거나,
언제 컴포넌트가 create 되고 destroy되는지 살펴볼 수 있게
코드를 고쳐보면
function Hello() {
function destroyFn() {
console.log("now i am DESTROYED ... ");
}
function createFn() {
console.log("i am created ! ");
return destroyFn;
}
useEffect(createFn, []);
return <h1>Hello</h1>;
}useEffect에 의해서 creactFn이 먼저 한 번만 실행 된다
그리고 컴포넌트가 업서지면 destroyFn 실행한다.
