차근차근 배움터

cleanup function 아래와 같이 created와 destroyed 컴포넌트의 생성과 종료를 확인할 수 있다 function Hello() { useEffect(() => { console.log('created :-)'); return () => { console.log('destroyed :'); } function hiFn() { console.log('hi :-)'); return byeFn; } useEffect(hiFn, []); return Hello } // 위의 코드를 아래 코드로 간단하게 변경 function Hello() { useEffect(() => { console.log('hi'); return function () { console.log('bye'); } }, []..

React.js가 멋진 이유 중에 하나는 component를 refresh 한다는 점이다. useEffect에 입력하는 두 가지 요소가 있는데, 하나는 실행 코드 그리고 다른 하나는 dependencies : react가 지켜봐야 하는 것들 그것들이 변화할 때 react.js에서 코드를 실행시킨다. 즉 두 번째 매개변수가 [] 이와 같이 빈 경우에는 React에서 지켜볼 사항이 없기 때문에 코드 실행 중에 처음으로 한 번 실행되고 만다. state가 변화할 때 component가 재실행되는 간단한 구조로 React가 작동한다. 모든 코드가 재실행 되는 것 UI의 관점에서는 새로운 데이터가 들어올 때 마다 자동으로 새로고침 되기 때문에 좋은 일이긴 하지만, 문제는 어떤 코드들은 이렇게 계속 계속 실행되면 ..

useEffect(()=>{ console.log("SEARCH FOR", keyword); }, [keyword] ); keyword의 부분이 keyword에 onChange할 때 실행하겠다는 의미가 된다. 1. useEffect() 한 번만 실행하는 경우 useEffect(() => { console.log('only once'); }, []); 2. useEffect() 특정 요소에 변화가 있을 때만 실행 useEffect(() => { console.log('counter has changed'); }, [counter]); 3. useEffect() 두 가지 요소에서 변화가 있을 때 useEffect(() => { console.log('counter or keyword has changed')..

한 번만 render 하고 싶은 경우? API를 가져오는 경우 어떻게 특정 코드들이 첫번째만 RENDER하도록 나머지 state가 변경되더라도 rerender 되지 않게 하는 방법을 알아본다. ※ state가 변경될 때 모든 코드가 다시 render 된다 가끔은 이것이 괜찮지만 가끔은 component 내부 몇몇 코드는 처음 딱 한 번 실행되고 다시 실행되지 않았으면 하는 것이 있을 것이다. useEffect 코드가 한 번만 실행하도록 해준다 import { useState, useEffect } from 'react'; import Button from './Button'; import styles from './App.module.css'; function App() { const [counter, ..

propTypes 설치 $ npm i prop-types module.css 전체 전역적인 css를 불러오는 것이 아닌 특정 요소에 필요한 style만 불러오고 싶을 때 module.css와 같은 방법을 이용할 수 있다. import styles from './Button.module.css'; function Button({ txt, bgc = 'red' }) { return ( {txt} ) } Button.moduel.css .btn { background-color: tomato; color: white; }

node js 설치 node -v 명령어로 설치되어 있는지 확인 npx 명령어로 또 확인 npx create-react-app react-for-beginner npm start 하면 React의 initial 초기 화면을 확인할 수 있다 src 모든 파일은 src 폴더 내에 들어간다 중요한 것은 index.js 일단 아래 폴더들만 남겨두고 npm start 명령어로 간단하게 시작한다.

단순 코드 반복이 아닌 '버튼' 하나를 만들고 텍스트와 같은 속성들만 다르게 받아서 재사용할 수 있는 방법을 살펴보았다 props 실수를 방지하기 위한 > prop 삽입을 깜빡하거나 propType은 우리의 prop이 정확한 타입을 받고 있는지를 확인한다. 연습 많이 하기!

propsType이라는 패키지에서 나온 문자 타입 확인하는 것 React JS에게 타입을 알려준다 PropTypes 설치 isRequired 설정이 가능하며 Btn.propTypes = { text: PropTypes.string, fontSize: PropTypes.number.isRequired, } default 값을 설정할 수 있다 function Btn({ txt, changeValue, fontSize = 14 }) {

이렇게 컴포넌트에 작성되어 있는 onClick 은 이벤트 리스너가 아니라 하나의 props 이다 컴포넌트를 re-rendering하고 싶지 않을 때 사용하는 개념 "Memo" const MemorizedBtn = React.memo(Btn); function Btn({ txt, changeValue }) { return ( {txt} ); } const MemorizedBtn = React.memo(Btn); function App() { const [value, setValue] = React.useState("Save Changes"); const changeValue = () => { setValue("Revert Changes"); } return ( ); } const root = documen..

컴포넌트에 위와 같이 속성 이름과 값을 지정하면 function에서 props로 변수를 받아서 props.banana와 같이 꺼낼 수 있다 function Btn(props) { return {props.txt}; } props는 object이기 때문에 아래와 같이 바로 받을 수도 있다 function Btn({txt}) { return {txt}; } big 속성에 Boolean 값을 넣을 때는 "" 가 아닌 {} 를 이용해서 넣어주기 function Btn({ txt, big }) { return {txt} {big}; } function App() { return ( ); }