리액트 기기기초 (33) 썸네일형 리스트형 #6.3 Recap useEffect 새로운 데이터가 들어올 때마다, 변화가 일어날 때 컴포넌트를(ui를) 새로고침함 그르나 어떤 코드들은 계속 계속 실행하면 안될 수도 있음 그렇기 때문에 useEffect를 통해서 우리가 원할 때에 새로고침을 할 수 있음 함수의 인자는 실행하려는 코드, 지켜보려는 것으로만 이루어져 있음 useEffect(() => { console.log("나는 한번만 실행돼용"); }, []); //처음 실행시에 딱 한번만 실행되고 다시는 하지마라 useEffect(() => { console.log("나는 키워드가 변화할 때 실행됨요"); }, [keyword]); //시작할 때랑 keyword가 변화할 때 코드를 실행하고 싶다면 useEffect(() => { console.log("나는 카운터가 .. #6.2 Deps 글자를 타핑할때마다 api를 새로 호출한하고 가정하면 -> 겁나 별로 search keyword에 변화가 있을때만 검색하고 싶음 counter가 변화할 때에도 영화를 검색하고 싶지 않음 코드의 특정한 부분만이 변화했을 때 원하는 코드들을 실행할 수 있게 하고싶음 import { useEffect, useState } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState("") const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.target.v.. #6.1 useEffect useEffect 두개의 인자를(arguent)가지는 함수 첫번째 인자:우리가 딱 한번만 실행하고 싶은 코드(api를 딱 한번만 호출하고 싶을 때 등) 두번째 인자: 리액트가 지켜봐야 할 것, 이것이 변화할 때 리액트가 코드를 실행시킴 import { useEffect, useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev)=> prev+1); console.log("항상 실행됨"); useEffect(()=>{ console.log("CALL THE API.."); },[]); return ( {counter} click me ); } expo.. #6.0 Introduction state가 변화할 때 항상 모든 component는 다시 실행되고, 모든 code들도 다시 실행됨 component내부의 몇몇 코드는 처음만 실행되고 다시는 실행되지 않도록 하고 싶다 -> effect import { render } from "@testing-library/react"; import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev)=> prev+1); console.log("render"); //state가 변경될 때마다 (버튼을 클릭할때마다) 계속 rander됨 return ( {counter} click me );.. #5.1 Tour of CRA css 코드를 자바스크립트 객체로 변환시켜줌 import styles from "./~"; styles가 css 코드를 가지고 있는 객체로 넘어옴 따라서 해당 css코드에 작성된 class name(여기서는 btn)을 프로퍼티 접근 연산자(.)를 사용해서 이용가능해짐. 위와 같이 작성해서 해당 css 스타일링을 사용할 수 있음. 브라우저를 통해 html 코드를 확인해보면 해당 컴포넌트에 무작위의 class name이 붙음. 요소가 각각의 클래스네임을 가지게 돼서 일일이 class name을 기억해서 스타일링 할 필요가 없음 .btn { color: white; background-color: tomato; } .title { font-family:.. #5.0 Introduction 라액트 프로젝트 만드는 법 프로젝트 깔끔하게 정리해주기 function App() { return ( Welcome back! ); } export default App; app.js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); index.js #4.2 Prop Types 1.리액트는 파라미터를 잘 못 넘겨도 확인할 수 없는 문제점이 존재한다. 2. 이런 문제를 줄이기 위해서 PropTypes라는 모듈의 도움을 받을 수 있다. 3. type과 다르게 입력 돼었을 경우 warning을 뜨게 할수 있고, parameter 에 값을 넣지 않는 경우 경고 메시지를 띄울수 있다. #4.1 Memo text, onClick은 단지 props의 이름임 state가 변경될 때마다 rerender가 발생함 props가 변경되지 않는다면 컴포넌트를 다시 그릴지 말지를 결정할 수 있음 -> MemorizedBtn = React.memo(Btn) 불필요한 re-render는 React.memo()로 관리할 수 있음 부모 컴포넌트의 state를 변경하면 당연히 그 자식 컴포넌트들도 Re-render가 일어남. 불필요한 렌더링이 발생할 수도 있는데, 이 경우에는 React.memo()로 prop의 변경이 일어난 부분만 렌더링 시킬 수 있음. 아주 많은 자식 컴포넌트를 가지고 있는 부모 컴포넌트일 때 사용하면 됨 React.memo() 컴포넌트가 React.memo()로 wrapping 될 때, React는 컴포넌.. 이전 1 2 3 4 5 다음
