분류 전체보기 (98) 썸네일형 리스트형 #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는 컴포넌.. #4.0 Props 어떤 props든 btn컴포넌트에 보내면 그것들은 Btn컴포넌트의 첫번째 인자속으로 들어감 props는 첫번째이자 Btn이 전달받는 유일한 인자 props는 우리가 보낸 모든 것들을 받는 오브젝트 아래 두개는 똑같음 #3.9 Final Practice and Recap 컴포넌트는 그 안에 다른 컴포넌트를 렌더링 할 수 있음 index안에 어떤 데이터가 있는지에 따라 Minutes & Hours를 그릴지 Km & Mile를 그릴지 결정함 {}안에는 JS를 쓸 수 있음 App 컴포넌트가 state를 가지도록 만들자 #3.8 Recap state를 바탕으로 ui를 변경 이전 1 2 3 4 5 6 ··· 13 다음
