React JS로 영화 웹 서비스 만들기

출처 : 노마드코더

 

 

React.memo()

memo는 memorize의 약자로 memo를 통해서 rerender 되고 싶은 부분, 즉 props가 바뀌는 부분만 rerender해주는 함수이다.

 

 

[옛날 방식]

const h3 = React.createElement("span",{
   onMouseEnter: () => console.log("mouse enter"),
}, "Hello I'm a span");

 

[JSX 방식 - 요즘 사용하는 방식]

위 코드와 같은 의미

const Title = () => <h3 id="title" onMouseEnter = {
    ()=> console.log("mouse enter")
}>Hello I'm a title
</h3>

 

 

createElement("",)에서 "" 안에 있는 말은 html 태그와 동일해야한다.

const h3 = React.createElement("span",{id: "sexy-span", style: {color: "red"}}, "Hello I'm a span");

 

 

render()함수

HTML로 만들어서 배치한다는 뜻으로 볼 수 있게 해주는 함수이다.

변수의 값이 변해도 화면을 다시 rendering해주지 않으면 화면에는 반영이 되지 않는다. -> 이걸 알아서 해주는게 useState임

App을 root안에 넣어주겠다는 뜻

ReactDOM.render(<App />, root)

 

useState

const [counter, setCounter] = React.useState(0);
       const onClick = () => {
           //setCounter(counter + 1);
           setCounter((current) => current + 1);
};

const [변수, 함수] = React.useState(초기값); 형태로 사용한다.