s_honey1122.log https://velog.io/ 그냥 기록용!!! Thu, 02 Nov 2023 15:41:29 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed s_honey1122.log https://velog.velcdn.com/images/s_honey1122/profile/30a2e0e8-eb78-406e-875e-73c39d9dd183/image.jpg https://velog.io/ Copyright (C) 2019. s_honey1122.log. All rights reserved. <![CDATA[[노마드 코더] React JS - Effects]]> https://velog.io/@s_honey1122/%EB%85%B8%EB%A7%88%EB%93%9C-%EC%BD%94%EB%8D%94-React-JS-Effects https://velog.io/@s_honey1122/%EB%85%B8%EB%A7%88%EB%93%9C-%EC%BD%94%EB%8D%94-React-JS-Effects Thu, 02 Nov 2023 15:41:29 GMT why we need for Effects..?

버튼을 click 할때마다 count + 1 해주는 버튼을 만들다

import { useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
console.log("render")
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click!</button>
    </div>
  );
}

export default App;

버튼을 클릭할때마다 render를 출력 해주고 있음 -> state가 변화해도 render를 출력하고 싶지 않다면..? -> useEffect 사용

useEffect

  • 두 개의 argument를 가지는 function
import { useState, useEffect } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
console.log("i run all the time");
const iRunOnlyOnce = () => {
  console.log("i run only once")
}
useEffect(iRunOnlyOnce, []);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click!</button>
    </div>
  );
}

export default App;

클릭버튼 입력시 useEffect의 첫번째 인자인 함수는 한번만 실행됨

useEffect function은 우리 코드가 딱 한번만 실행될 수 있도록 보호해줌!!!

useEffect의 두번째 인자..?

import { useState, useEffect } 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.value);

  console.log("i run all the time");

useEffect(() => {
  console.log("CALL THE API")
}, []);

useEffect(() => {
  if(keyword !== "" && keyword.length > 5){
    console.log("SEARCH FOR", keyword)
  }
}, [keyword])
  return (
    <div>
      <input
      value={keyword} 
      onChange = {onChange} 
      type="text" 
      placeholder="Search here..." />
      <h1>{counter}</h1>
      <button onClick={onClick}>click!</button>
    </div>
  );
}

export default App;
  • 두번째 인자로 넘겨주는 리스트의 값이 변할때만 useEffect의 첫번째 인자 함수를 실행시킴

두번째 인자에 2개 이상의 요소를 넣을 수 있음..

useEffect(() => {
  console.log("I run when 'keyword' or 'conter' changes.")
}, [keyword, counter])

keyword 또는 counter의 값이 변하면 로그 출력

Cleanup function

  • 컴포넌트가 destroy 될 때 특정 함수를 실행시킬 수 있음
    import { useState, useEffect } from "react";

function Hello() { function byeFn() { console.log("bye!") } function hiFn() { console.log("created!"); return byeFn; } useEffect(hiFn, []) return

Hello

}

function CleanupFunction () { const [showing, setShowing] = useState(false); const onClick = () => setShowing((prev) => !prev) return(

{showing ? : null}
) }

export default CleanupFunction;

```

  • 버튼 클릭하여 Hello 컴포넌트가 사라지고 destory 될 때 buyFn 함수를 실행시켜 buy! 로그가 출력됨..신기..!!

빈 deps -> 컴포넌트 파괴시 cleanup 함수 실행 -> 리렌더링 -> useEffect 함수 실행 -> 이전 effect는 삭제되고 return 함수를 실행시킴

출처 : ReactJS로 영화 웹 서비스 만들기

]]> <![CDATA[[노마드 코더] ReactJS - propsType]]> https://velog.io/@s_honey1122/%EB%85%B8%EB%A7%88%EB%93%9C-%EC%BD%94%EB%8D%94-ReactJS-propsType https://velog.io/@s_honey1122/%EB%85%B8%EB%A7%88%EB%93%9C-%EC%BD%94%EB%8D%94-ReactJS-propsType Thu, 02 Nov 2023 13:56:45 GMT 만약 prop를 잘못 넘겨준다면.. 
<!DOCTYPE html>
<html lang="ko">

<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const root = document.getElementById("root");
    function Btn({text, fontSize}) {
        return <button style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            radius: "999px",
            border: "none",
            borderRadius: "999px",
            fontSize
        }}>{text}</button>
    }

    function App() {
        return (
            <div>
                <Btn text="Save Changes" fontSize={18}/>
                <Btn text={14} fontSize={"Continue"}/>
            </div>
        );
    }
    ReactDOM.render(<App />, root)
</script>

</html>

분명 잘못된 로직.. but 코드상 오류는 없어 버튼이 이상하게 노출됨 ->propType은 어떤 prop를 받고 있는지 체크해줌

propsType

<!DOCTYPE html>
<html lang="ko">

<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/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>

<script type="text/babel">
    const root = document.getElementById("root");
    function Btn({text, fontSize}) {
        return <button style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            radius: "999px",
            border: "none",
            borderRadius: "999px",
            fontSize
        }}>{text}</button>
    }
    Btn.propTypes = {
        text: PropTypes.string,
        fontSize: PropTypes.number,
    };
    function App() {
        return (
            <div>
                <Btn text="Save Changes" fontSize={18}/>
                <Btn text={14} fontSize={"Continue"}/>
            </div>
        );
    }
    ReactDOM.render(<App />, root)
</script>

</html>
https://unpkg.com/prop-types@15.7.2/prop-types.js

추가 후, https://unpkg.com/react@17.0.2/umd/react.production.min.js -> https://unpkg.com/react@17.0.2/umd/react.development.js 로 변경함..

경고문이 노출됨

isRequired

  • 반드시 prop가 존재해야 하는 경우
    Btn.propTypes = {
      text: PropTypes.string.isRequired,
      fontSize: PropTypes.number.isRequired,
  };
  function App() {
      return (
          <div>
              <Btn text="Save Changes" fontSize={18}/>
              <Btn text={"Continue"}/>
          </div>
      );
  }

경고문이 출력

출처 : ReactJS로 영화 웹 서비스 만들기

]]> <![CDATA[[노마드 코더] React JS - Tour of CRA]]> https://velog.io/@s_honey1122/%EB%85%B8%EB%A7%88%EB%93%9C-%EC%BD%94%EB%8D%94-React-JS-Tour-of-CRA https://velog.io/@s_honey1122/%EB%85%B8%EB%A7%88%EB%93%9C-%EC%BD%94%EB%8D%94-React-JS-Tour-of-CRA Wed, 01 Nov 2023 15:00:16 GMT prop-types 설치 
npm i prop-types

사용

import PropTypes from "prop-types";

function Button({text}) {
    return <button>{text}</button>;
}

Button.propTypes = {
    text : PropTypes.string.isRequired, 
}
export default Button;

import 후 사용해주기

css 사용하기

src 폴더에 스타일 시트를 넣어줌

import "./styles.css"

js 파일에 import 해주기

style 직접적으로 넣기

function Button({text}) {
    return <button style={{
        backgroundColor:"tomato",
        color:"white"
    }}>{text}</button>;
}

모듈을 사용하여 css 적용하기

css 가 전역적으로 사용되는 문제 -> 모듈별로 사용하자

버튼에만 적용하고 싶은 Button.module.css 생성

Button.module.css

.btn {
    color: white;
    background-color: tomato;
}

Button.js

import PropTypes from "prop-types";
import styles from "./Button.module.css"

function Button({text}) {
    return <button className={styles.btn}>{text}</button>;
}

Button.propTypes = {
    text : PropTypes.string.isRequired, 
}
export default Button;
  • 적용하고 싶은 js에만 import해줌
  • CRA는 css 코드를 js object로 변환시켜줌 무작위적인 랜덤 class를 갖게 됨

출처 : ReactJS로 영화 웹 서비스 만들기

]]> <![CDATA[[노마드 코더]React JS - Memo]]> https://velog.io/@s_honey1122/%EB%85%B8%EB%A7%88%EB%93%9C-%EC%BD%94%EB%8D%94React-JS-Memo https://velog.io/@s_honey1122/%EB%85%B8%EB%A7%88%EB%93%9C-%EC%BD%94%EB%8D%94React-JS-Memo Thu, 26 Oct 2023 16:10:24 GMT props에 함수를 전달 할 수 있음 
<!DOCTYPE html>
<html lang="ko">

<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const root = document.getElementById("root");
    function Btn({text, changeValue}) {
        console.log(text , "was rendered")
        return (
        <button 
        onClick = {changeValue}
        style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            radius: "999px",
            border: "none",
            borderRadius: "999px",
            fontSize: 16
        }}
        >
        {text}
        </button>
        )
    }

    function App() {
        const [value, setValue] = React.useState("changeValue");
        const changeValue = () => setValue("RevertChange")
        return (
            <div>
                <Btn text={value} changeValue = {changeValue}/>
                <Btn text="Continue" />
            </div>
        );
    }
    ReactDOM.render(<App />, root)
</script>

</html>

-> 하지만.. 바꾸는 부분은 첫번째 버튼인데 버튼 클릭 시 전체를 렌더링 하고 있음

--> Memo 를 사용하면 변하는 부분만 렌더링 할 수 있음

Memo

const MemorizedBtn = React.memo(Btn)
    function App() {
        const [value, setValue] = React.useState("changeValue");
        const changeValue = () => setValue("RevertChange")
        return (
            <div>
                <MemorizedBtn text={value} changeValue = {changeValue}/>
                <MemorizedBtn text="Continue" />
            </div>
        );
    }

  • 버튼 클릭 시 변한 부분만 렌더링 해주고 있음
  • 어플리케이션의 성능을 개선 할 수 있음

출처 : ReactJS로 영화 웹 서비스 만들기

]]> <![CDATA[[노마드 코더]React JS - props]]> https://velog.io/@s_honey1122/%EB%85%B8%EB%A7%88%EB%93%9C-%EC%BD%94%EB%8D%94React-JS-props https://velog.io/@s_honey1122/%EB%85%B8%EB%A7%88%EB%93%9C-%EC%BD%94%EB%8D%94React-JS-props Thu, 26 Oct 2023 15:30:48 GMT Props 사용해보기 
<!DOCTYPE html>
<html lang="ko">

<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const root = document.getElementById("root");
    function Btn(props) {
        console.log(props);
        return <button style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            radius: "999px",
            border: "none",
            borderRadius: "999px"
        }}>{props.banana}</button>
    }

    function App() {
        return (
            <div>
                <Btn banana="Save Changes" />
                // Btn({banana:"save changes})와 동일함
                <Btn banana="Continue" />
            </div>
        );
    }
    ReactDOM.render(<App />, root)
</script>

</html>

  • ReactJS는 자동으로 property(prop)들을 object안에 넣음. object를 함수에 전달
<Btn banana="Save Changes" x="false"/>

이렇게 넣어주면...

  • props를 모두 갖는 object를 가지게 됨

shortcut 방법

function Btn({banana}) {
        return <button style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            radius: "999px",
            border: "none",
            borderRadius: "999px"
        }}>{banana}</button>
    }
  • props를 object에서 꺼낼 수 있음

style로 응용해보기..

  function Btn({banana, big}) {
        return <button style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            radius: "999px",
            border: "none",
            borderRadius: "999px",
            fontSize: big ? 18 : 16
        }}>{banana}</button>
    }

    function App() {
        return (
            <div>
                <Btn banana="Save Changes" big={true}/>
                <Btn banana="Continue" />
            </div>
        );
    }

출처 : ReactJS로 영화 웹 서비스 만들기

]]> <![CDATA[[노마드코더] React JS - State Function ]]> https://velog.io/@s_honey1122/%EB%85%B8%EB%A7%88%EB%93%9C%EC%BD%94%EB%8D%94-React-JS-State-Function https://velog.io/@s_honey1122/%EB%85%B8%EB%A7%88%EB%93%9C%EC%BD%94%EB%8D%94-React-JS-State-Function Mon, 23 Oct 2023 15:11:01 GMT useState를 보다 안정적으로 사용하기.. 
<!DOCTYPE html>
<html lang="ko">

<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const root = document.getElementById("root");
    function App (){
        const [counter, setCounter] = React.useState(0);
        const onClick = () => {
            // setCounter(counter + 1);
            // 직접 값을 설정해주는 법
            setCounter((current) => current + 1)
            // react가 이 current가 현재값임을 정확히 알 수 있음
            // 함수를 전달해주는 법
        };
        return (
            <div>
                <h3>Total clicks : {counter}</h3>
                <button onClick = {onClick}>Click me</button>
            </div>
        );
    }
    ReactDOM.render(<App />, root)
</script>

</html>

making converter

<!DOCTYPE html>
<html lang="ko">

<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const root = document.getElementById("root");
    function App() {
        const [amount, setAmount] = React.useState();
        const [flipped, setFlipped] = React.useState(false);
        const onChange = (event) => {
            setAmount(event.target.value);
        }
        function reset() {
            setAmount(0)
        }
        function onFlip() {
            reset();
            setFlipped((current) => !current);
        }
        return (
            <div>
                <h1 className="hi">Super Converter</h1>
                <div>
                    <label htmlFor="minutes">Minutes</label>
                    <input
                        value={flipped ? amount * 60 : amount}
                        classId="minutes"
                        placeholder="Minutes"
                        type="number"
                        onChange={onChange}
                        disabled={flipped}
                    />
                    <h4>You want to convert {amount}</h4>
                    <label htmlFor="hours">Hours</label>
                    <input
                        classId="hours"
                        placeholder="hours"
                        type="number"
                        onChange={onChange}
                        value={flipped ? amount : Math.round(amount / 60)}
                        disabled={!flipped}
                    />
                </div>
                <button onClick={reset}>Reset</button>
                <button onClick={onFlip}>flip</button>
            </div>
        );
    }
    ReactDOM.render(<App />, root)
</script>

</html>

출처 : ReactJS로 영화 웹 서비스 만들기

]]> <![CDATA[[노마드코더] React JS - State]]> https://velog.io/@s_honey1122/%EB%85%B8%EB%A7%88%EB%93%9C%EC%BD%94%EB%8D%94-React-JS-State https://velog.io/@s_honey1122/%EB%85%B8%EB%A7%88%EB%93%9C%EC%BD%94%EB%8D%94-React-JS-State Sun, 22 Oct 2023 14:26:09 GMT 버튼 Click 할 때마다 + 1 해주기!!

1. vanilla.js version

<!DOCTYPE html>
<html lang="ko">
<body>
    <span>Total clicks : 0</span>
    <button id="btn">Click me</button>
    <script>
        let counter = 0;
        const button = document.getElementById("btn")
        const span = document.querySelector("span");
        function handleClick() {
            counter = counter + 1;
            span.innerText = `Total clicks :  ${counter}`;
        }
        button.addEventListener("click", handleClick)
    </script>
</body>
</html>
  • span을 이용하여 counter를 + 1 처리해주고 있음

2. React.js

<!DOCTYPE html>
<html lang="ko">

<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const root = document.getElementById("root");
    let counter = 0;
    function countUp () {
        counter = counter + 1;
        reRender()
    }
    function reRender () {
        ReactDOM.render(<Container />, root) //countUp을 호출할때마다 렌더링을 해주어야 함
    }
    const Container = () => (
        (
            <div>
                <h3>Total clicks : {counter}</h3>
                <button onClick = {countUp}>Click me</button>
            </div>
        )
    )
    reRender();
</script>

</html>

  • UI에서 바뀐 부분만 업데이트 해주고 있음

  • 이전에 렌더링된 컴포넌트와 다음의 렌더링 될 컴포넌트를 확인함.

  • 전체를 reRendering 하지만 html에서 숫자만 업데이트 되고 있음

3. React.js - useState사용

<!DOCTYPE html>
<html lang="ko">

<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const root = document.getElementById("root");
    function App (){
        const [counter, setCounter] = React.useState(0);
        const onClick = () => {
            setCounter(counter + 1);
        };
        return (
            <div>
                <h3>Total clicks : {counter}</h3>
                <button onClick = {onClick}>Click me</button>
            </div>
        );
    }
    ReactDOM.render(<App />, root)
</script>

</html>
  • modifier(setCount)함수를 이용하여 컴포넌트는 새로운 값을 가지고 다시 한번 렌더링함
  • 데이터가 바뀔 때마다 컴포넌트를 리렌더링 후 UI를 업데이트

출처 ReactJS로 영화 웹 서비스 만들기

]]> <![CDATA[[개발회고록]강남구 따숨쉼터]]> https://velog.io/@s_honey1122/%EA%B0%9C%EB%B0%9C%ED%9A%8C%EA%B3%A0%EB%A1%9D%EA%B0%95%EB%82%A8%EA%B5%AC-%EB%94%B0%EC%88%A8%EC%89%BC%ED%84%B0 https://velog.io/@s_honey1122/%EA%B0%9C%EB%B0%9C%ED%9A%8C%EA%B3%A0%EB%A1%9D%EA%B0%95%EB%82%A8%EA%B5%AC-%EB%94%B0%EC%88%A8%EC%89%BC%ED%84%B0 Thu, 08 Dec 2022 07:46:27 GMT 강남구 따숨쉼터 언제까지나 만들고 싶은 것만을 만들수는 없다. 그렇기 때문에 이 취업준비시간이 불안하지만 참 좋은 시기라고 생각한다. 내가 좋아하는 것을 하며, 나를 발전시킬 수 있는 시간.

api를 이용하여 승강기를 이용하는 노약자를 위한 빠른환승 서비스를 만들고 싶었는데, 관련 데이터를 찾는것이 쉽지 않았다. 그러다 각 지역별(또는 자치구) 마다 운영하는 한파쉼터가 예산액에 비해 이용률이 낮다는 기사를 접했고, 찾아보니 (강남구 기준) 자치구에 등록된 한파쉼터의 수는 실제 데이터보다 10분의1도 채 되지 않음을 알게 되었다.

큰 뜻으로 만든것은 아니지만, 한파쉼터정보를 알려주는 서비스가 있다면 누군가는 용이하게 사용하지 않을까? 라는 마음으로 프로젝트를 시작했다.

(카카오맵API를 사용하여 지도를 불러온다.) (지도 -> 쉼터 상세 목록 -> 동 선택 -> 지도 매커니즘은 중년세대가 애용하는 '네이버 부동산'을 참고했다.)

노약자, 그 중 고령층을 주이용자로 설정하고 만들었다. 큼직한 글씨, 최대한 직관적인 디자인으로 만들었는데, 트렌디하고 세련되지는 않았다.

누군가에겐 당연한 개념이 누군가에겐 당연하지 않을수도 있음을 생각하며 만들었다.

서울열린데이터광장에 당당하게 활용사례등록을 신청했지만, 아직 수정에 수정을 거듭해야 하는 열려있는(?)프로젝트이다. 디자인을 뒤로하고 웹접근성에 초점을 맞추어 만들었다지만 여러 기기를 호환하지 못하는 점에서 웹접근성 점수가 현저히 떨어진다. 매일 혼자 깃허브에 들어가서 예뻐하는 서비스지만, 웹접근성 모순을..수정해야한다. 그 외로 각 동별 카카오맵 중심 맞추기, 심장제세동기찾기 항목의 이미지가 아닌 실제 지도 불러오기 등.. 보완해야 한다.

다음프로젝트는 더 최선을 다하고 싶다. 스스로 최선을 다했다고 느낄 수 있을 만큼. 그리고 스스로에게 의미있는 프로젝트라서 열심히 하는 것이 아닌, 개발 자체에 의미를 두고 개발하는 마음가짐을 가져야겠다.

]]> <![CDATA[Git - Git Bash이용하여 프로젝트 업데이트 & 리액트 사이트 배포]]> https://velog.io/@s_honey1122/Git-Git-Bash%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%B0%B0%ED%8F%AC-pytgkb80 https://velog.io/@s_honey1122/Git-Git-Bash%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%B0%B0%ED%8F%AC-pytgkb80 Wed, 07 Dec 2022 06:12:21 GMT

1. Git - Downloads

GIT Git Bash가 설치 되어야 함.

Git Hub 가입 & repository 만들기

  • public으로 설정
  • Add a README file 체크 X

    2. git에 upload 할 폴더나 파일 설정

    3. 2의 폴더나 파일에서 git bash 열기

git bash 터미널 명령 모음
$ pwd - 현재 위치 확인
$ cd.. - 한단계 상위 directory로 이동
$ cd ~ - 최상위 디렉토리로 이동
$ cd d: -D드라이브로 이동 
$ ld - 현재 위치해있는 디렉토리의 폴더와 파일을 보여줌.
$ cd 폴더명 / 폴더명 - 특정 디렉토리로 이동

4. 3에서 정한 폴더를 저장소(초기화)로 지정

$ git init - 저장소(초기화)로 만든다
$ git status - 현재 상태 확인
$ git log - 변경 이력 확인

5. github 사용자 설정

$ git config --global user.email "깃허브 이메일"
$ git config --global user.name "깃허브 이름"
이메일, 이름 맞게 설정 했는지 확인하기

제어판 -> 자격증명관리자 -> window자격증명 $ git config --list

특정상황에서 빠져나오기

:q

6. commit 지정(버전 설정)

$ git add 파일명 또는 $ git add .(추가하지 않은 모든 파일)
$ git commit -m"메세지"

7. github에 연결, 업로드

$ git remote add origin repository주소
$ git push -u origin master(파일올릴때 에러 나면 + master)
프로젝트 수정 후 업로드
$ git add .
$ git commit -m"메세지"
$ git push -u origin master

리액트 프로젝트 사이트 배포하기

git은 react기반 웹페이지를 지원하지 않음

netlify 회원가입하여 진행.

]]> <![CDATA[220809[한국타이어 벤치마킹]가상요소]]> https://velog.io/@s_honey1122/220809%ED%95%9C%EA%B5%AD%ED%83%80%EC%9D%B4%EC%96%B4-%EB%B2%A4%EC%B9%98%EB%A7%88%ED%82%B9%EA%B0%80%EC%83%81%EC%9A%94%EC%86%8C https://velog.io/@s_honey1122/220809%ED%95%9C%EA%B5%AD%ED%83%80%EC%9D%B4%EC%96%B4-%EB%B2%A4%EC%B9%98%EB%A7%88%ED%82%B9%EA%B0%80%EC%83%81%EC%9A%94%EC%86%8C Tue, 06 Dec 2022 02:20:49 GMT 가상요소에 hover 적용할 수 없음.

가상요소에 hover효과를 주고 싶다면, 가상요소의 부모에 주기. a태그의 before에 hover 효과 주고 싶다면,

#media .inner .medialist li a::before:hover

a태그의 before요소에 hover를 주었을 때, 가 아닌

#media .inner .medialist li a:hover::before

a태그에 hover 했을 때, a태그의 가상요소로 가정하고 작성해야 함.

닫는 태그가 없는 태그에 가상요소 적용할 수 없음.

img태그 등 닫는 태그가 없는 요소에 가상요소 적용 시 가상요소 부분이 비활성화 됨. 가상요소를 감싸줄 닫는 태그가 없기 때문.

hover시 zoom-in효과는 가상요소를 사용하지 않는것이 좋음(??)

미디어 sector의 이미지요소가 유의미 하지 않다 판단하여 before요소로 주었을 때, 밑 글과 함께 list요소로 묶음. -> hover시 zoom-in되어야 하는 효과를 적용시킬 수 없었음. before요소를 감싸고 overflow : hidden을 시켜주어야 했는데, 맥락상 밑 글들과 함께 묵을 수 밖에 없었음. img태그를 주어 해결했지만, 아쉬웠음.

]]> <![CDATA[활용해 볼 CSS 속성]]> https://velog.io/@s_honey1122/%ED%99%9C%EC%9A%A9%ED%95%B4-%EB%B3%BC-CSS-%EC%86%8D%EC%84%B1 https://velog.io/@s_honey1122/%ED%99%9C%EC%9A%A9%ED%95%B4-%EB%B3%BC-CSS-%EC%86%8D%EC%84%B1 Tue, 06 Dec 2022 02:20:15 GMT 원하는 속성만 transition 주기

transition: background-color 2s;

원하는 속성만 따로 transition효과를 줄 수 있음

비디오, 이미지 등 크기 채우기

#motion .inner .adlist ul li .mainad {
  height: 720px;
  object-fit: fill;
  width: 100%;

img video 등 고유 크기를 갖는 요소들의 크기 지정 후 object-fit : fill; 속성을 주면, 그 크기에 맞게 요소 채우기 가능.

동영상 썸네일(첫 화면)

<video preload="metadata">

영상의 첫 화면이 썸네일 형식으로 표현.

오늘은 여기까지 : )

]]> <![CDATA[220809[한국타이어 벤치마킹]img태그와 가상요소]]> https://velog.io/@s_honey1122/220809%ED%95%9C%EA%B5%AD%ED%83%80%EC%9D%B4%EC%96%B4-%EB%B2%A4%EC%B9%98%EB%A7%88%ED%82%B9img%ED%83%9C%EA%B7%B8%EC%99%80-%EA%B0%80%EC%83%81%EC%9A%94%EC%86%8C https://velog.io/@s_honey1122/220809%ED%95%9C%EA%B5%AD%ED%83%80%EC%9D%B4%EC%96%B4-%EB%B2%A4%EC%B9%98%EB%A7%88%ED%82%B9img%ED%83%9C%EA%B7%B8%EC%99%80-%EA%B0%80%EC%83%81%EC%9A%94%EC%86%8C Tue, 06 Dec 2022 02:19:48 GMT img태그에 ::before를 추가하여 hover시 다른 이미지로 덮어쓰기를 시도했지만 실패했다. img 태그 밑 가상요소가 나타나지 않음. 가상요소 영역이 어둡게 되어있음.

요인 : img는 닫는 태그가 없는 태그이기 때문에, 가상요소를 쓸 수 없음. 닫는 태그가 없기 때문에 자식을 담을 수 없기 때문.

]]> <![CDATA[width요소(outerWidth & innerWidth & width)]]> https://velog.io/@s_honey1122/width%EC%9A%94%EC%86%8CouterWidth-innerWidth-width-cg2d0klh https://velog.io/@s_honey1122/width%EC%9A%94%EC%86%8CouterWidth-innerWidth-width-cg2d0klh Tue, 06 Dec 2022 02:18:17 GMT ※여러줄 주석 처리 주석 구역 드래그 후, Alt + Shift + A

outerWidth & innerWidth & width

<style>
   .box{
    width: 300px;
    height: 300px;
    border: 10px solid green;
    padding: 50px;
    margin: 50px;
   }
</style>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(document).ready(function(){
        console.log($(".box").width());
        console.log($(".box").innerWidth());
        console.log($(".box").outerWidth());
        console.log($(".box").outerWidth(true));

    });
</script>
</head>
<body>
    <div class="box">     
    </div>
</body>

outerWidth

요소의 순수 너비 + padding + border = 300px + 100px + 20px = 420px

outerWidth(true)

outerWidth + margin = 420px + 100px = 520px

innerWidth

요소의 순수 너비 + padding = 300px + 100px = 400px

width

요소의 순수 너비 = 300px

]]> <![CDATA[Git - Git Bash이용하여 프로젝트 업데이트 & 리액트 사이트 배포]]> https://velog.io/@s_honey1122/Git-Git-Bash%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%B0%B0%ED%8F%AC https://velog.io/@s_honey1122/Git-Git-Bash%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%B0%B0%ED%8F%AC Tue, 06 Dec 2022 02:16:32 GMT 1. Git - Downloads

GIT Git Bash가 설치 되어야 함.

Git Hub 가입 & repository 만들기

  • public으로 설정
  • Add a README file 체크 X

    2. git에 upload 할 폴더나 파일 설정

    3. 2의 폴더나 파일에서 git bash 열기

git bash 터미널 명령 모음
$ pwd - 현재 위치 확인
$ cd.. - 한단계 상위 directory로 이동
$ cd ~ - 최상위 디렉토리로 이동
$ cd d: -D드라이브로 이동 
$ ld - 현재 위치해있는 디렉토리의 폴더와 파일을 보여줌.
$ cd 폴더명 / 폴더명 - 특정 디렉토리로 이동

4. 3에서 정한 폴더를 저장소(초기화)로 지정

$ git init - 저장소(초기화)로 만든다
$ git status - 현재 상태 확인
$ git log - 변경 이력 확인

5. github 사용자 설정

$ git config --global user.email "깃허브 이메일"
$ git config --global user.name "깃허브 이름"
이메일, 이름 맞게 설정 했는지 확인하기

제어판 -> 자격증명관리자 -> window자격증명 $ git config --list

특정상황에서 빠져나오기

:q

6. commit 지정(버전 설정)

$ git add 파일명 또는 $ git add .(추가하지 않은 모든 파일)
$ git commit -m"메세지"

7. github에 연결, 업로드

$ git remote add origin repository주소
$ git push -u origin master(파일올릴때 에러 나면 + master)
프로젝트 수정 후 업로드
$ git add .
$ git commit -m"메세지"
$ git push -u origin master

리액트 프로젝트 사이트 배포하기

git은 react기반 웹페이지를 지원하지 않음

netlify 회원가입하여 진행. Build command 항목에서.. 로 수정하여 업로드 해주면 더 안전하게 사이트를 배포할 수 있음

]]> <![CDATA[React - scss연동, ...rest props]]> https://velog.io/@s_honey1122/React-scss%EC%97%B0%EB%8F%99-...rest-props https://velog.io/@s_honey1122/React-scss%EC%97%B0%EB%8F%99-...rest-props Tue, 06 Dec 2022 02:13:33 GMT watching하여 css파일을 별도로 만들지 않고, react의 scss를 실행해보자

sass 설치

터미널 명령
yarn add sass
App.jsx
import React from 'react';
import "./App.scss";
import Button from "./components/Button"

function App() {
  return (
    <>
      <div className="App">
        <Button>파란버튼</Button>
      </div>
    </>
  );
}

export default App;
App.scss
.App{
    max-width: 700px;
    margin: 50px auto;
    border: 2px solid gray;
    padding: 2rem;
}
Button.jsx
import React from 'react'
import "./Button.scss"


const Button = ({children}) => {
  return (
    <button className="Button">{children}</button>
  )
}

export default Button
Button.scss
$blue: #228be6;

.Button {
    background: $blue;
    color: white;
    font-weight: bold;
    border: 0;
    outline: none;
    border-radius: 4px;
    padding: 1rem 2rem;
    cursor: pointer;

    &:hover {
        background: lighten($blue, 20%);
        //lighten함수 사용, 색상 10%밝게
    }

    &:active {
        background: darken($blue, 20%);
    }
}

classnames 라이브러리 설치

yarn add classnames

특정 값이 true/false임에 따라 클래스명을 추가하거나, 추가하지 않을 수 있다.

key(class명) : value형태로 value가 true 혹은 false로 평가됨에 따라 스타일을 적용하거나 적용하지 않을 수 있음.

App.jsx
import React from 'react';
import "./App.scss";
import Button from "./components/Button"

function App() {
  return (
    <>
      <div className="App">
        <Button size = "large">파란버튼</Button>
        <Button>파란버튼</Button>
        <Button size = "smaill">파란버튼</Button>
      </div>
    </>
  );
}
export default App;
Button.jsx
import React from 'react'
import "./Button.scss"
import classNames from 'classnames'

const Button = ({children, size}) => {
  return (
    <button className={classNames("Button", size)}>{children}</button>
  )
}

Button.defaultProps = {
  size : "medium",
};

export default Button
import classNames from 'classnames'// 설치한 classNames라이브러리 불러옴.
"Button"클래스는 조건없이 기본으로 추가.
"size"클래스는 값이 true인 경우에만 추가.

defaultProps

props를 따로 지정해주지 안항도 기본값으로 전달 해주는 props 컴포넌트명.defulatProps={}

Button.scss
$blue: #228be6;

.Button {
    background: $blue;
    color: white;
    font-weight: bold;
    border: 0;
    outline: none;
    border-radius: 4px;
    padding: 1rem 2rem;
    cursor: pointer;

    &:hover {
        background: lighten($blue, 20%);
    }

    &:active {
        background: darken($blue, 20%);
    }
    &.large {
        width: 200px;
        height: 70px;
        font-size: 1.3rem;
    }
    &.medium {
        width: 100px;
        height: 40px;
        font-size: 1rem;
    }
    &.small {
        width: 70px;
        height: 30px;
        font-size: 0.7rem;
    }
    & + & {
        margin-left: 1rem;
    }
}
& + & // .Button + .Button과 같음. 자매관계 태그중 바로 옆 태그를 선택하라.

...rest props

전달해야 하는 props가 너무 많을때..

App.jsx
...
<div className="BtnWrap">
                <Button color="pink" size="large" outline fullWidth>
                    버튼
                </Button>
                <Button color="lime" size="large" fullWidth>
                    버튼
                </Button>
                <Button 
        color="blue" 
        size="large" 
        fullWidth
        onClick={()=>{
          console.log("클릭!");
        }}
        onMouseMove={()=>{
          console.log("마우스가 움직임");
        }}>
                    버튼
                </Button>
            </div>
Button.jsx
const Button = ({children, size, color, outline, fullWidth,...rest}) => {
  return (
    <button className={classNames("Button", size, color, {outline, fullWidth})}
    {...rest}>
      {children}
    </button>
  )
}

출처 : [React] 리액트 classnames 활용하기 (classnames, !! 연산자) [React] defaultProps 사용하기

]]> <![CDATA[React - PostCSS(CSS Modul)]]> https://velog.io/@s_honey1122/React-PostCSSCSS-Modul https://velog.io/@s_honey1122/React-PostCSSCSS-Modul Tue, 06 Dec 2022 02:13:13 GMT className 부여하여 버튼에 스타일 주기..

App.jsx
import React from 'react';
import "./App.css";
import Button1 from "./components/Button1"
import Button2 from "./components/Button2"


function App() {
  return (
    <>
      <Button1></Button1>
      <Button2></Button2>
    </>
  );
}

export default App;
Button1.jsx
import React from 'react'
import "./Button1.css"

const Button1 = () => {
  return (
    <button className='button'>BUTTON1</button>
  )
}

export default Button1
Button1.css
.button{
    background-color: aqua;
}
Button2.jsx
import React from 'react'
import './Button2.css'

const Button2 = () => {
  return (
    <button className='button'>BUTTON2</button>
  )
}

export default Button2
Button2.css
.button{
    background-color: red;
}

Button이 모두 Button2.css로 적용되는 불상사..

PostCSS(CSS Module)

CSS 클래스가 중첩되는 것을 완벽히 방지. CSS Module 사용시, CSS 파일의 확장자 :
.module.css 리액트 컴포넌트 파일에서 해당 CSS 파일을 불러올 때 CSS 파일에 선언한 클래스 이름들이 고유해짐.

Button1.jsx
import React from 'react'
import styles from "./Button1.module.css"


const Button1 = () => {
  return (
    <button className={styles.button}>BUTTON1</button>
  )
}

export default Button1
import styles from "./Button1.module.css"// import로 불러온 styles 객체 안의 값을 참조해야 함.
Button1.module.css
.button{
    background-color: aqua;
}
Button2.jsx
import React from 'react'
import aa from './Button2.module.css'

const Button2 = () => {
    return (
        <button className={aa.button}>BUTTON2</button>
    )
}

export default Button2
import aa from './Button2.module.css'// import하는 객체의 이름은 자유롭게 선언.
Button2.module.css
.button{
    background-color: red;
}

]]> <![CDATA[React - ClassComponent]]> https://velog.io/@s_honey1122/React-ClassComponent https://velog.io/@s_honey1122/React-ClassComponent Tue, 06 Dec 2022 02:12:42 GMT 클래스형 컴포넌트

최근 잘 사용하지 않는 컴포넌트 형태. render() 메서드를 이용하여 렌더링, JSX 반환. props를 조회해야 할 때에는 this.props를 조회.

button 클릭시 count되는 프로그램을 클래스형 컴포넌트 이용하여 구현

AppClass.jsx
import React, {Component} from "react";

export default class AppClass extends Component{    
    constructor(props){
        super(props)
        this.state = {
            counter : 0
        }
    }

    increase = () => {
        this.setState({
            counter : this.state.counter + 1
        });
    }

    render(){
        return(
            <>
                <h1>{this.state.counter}</h1>
                <button onClick={this.increase}>+1</button>
            </>
        )
    }
}
extends Component // React 컴포넌트 class를 정의하려면 React.Component를 상속받아야 함.
constructor(props)// React.Component를 상속한 컴포넌트의 생성자를 구현할 때에는 다른 구문에 앞서 super(props)를 호출해야 함.

React에사 생성자 목적 this.state에 객체를 할당하여 지역 state초기화. 인스턴스에 이벤트 처리 메서드를 바인딩. this.state를 직접 할당할 수 있는 유일한 곳. 이 외에는 this.setState()를 사용. constructor 내부에서 setState()를 호추하면 안됨. 컴포넌트에 지역 state가 필요하면, 생성자 내에서 this.state에 초기 state값을 할당해야함.

super(props)// 이 구문이 없으면 this.props가 생성자 내에서 정의되지 않아 버그로 이어짐.
render() // React.Component의 하위 class에서 반드시 정의해야 하는 메서드.

출처 : 클래스형 컴포넌트 React.Component

]]> <![CDATA[React - Context API]]> https://velog.io/@s_honey1122/React-Context-API https://velog.io/@s_honey1122/React-Context-API Tue, 06 Dec 2022 02:12:24 GMT Context.jsx 
import React from 'react'

function Child({text}){
    return <div>HI{text}</div>
}

function Parent({text}){
    return <Child text = {text}/>
}

function GrandParent({text}){
    return <Parent text = {text}/>
}

function Context({text}){
    return <GrandParent text="GOOD"/>
}

export default Context

복잡한 구조.. -> Context API 사용하자!

Context API

컴포넌트를 여러개 거쳐서 전달하는 상황 -> Context API를 이용하여 간단하게 구현 할 수 있음. 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리함.

createContext

context 객체 생성 createContext 함수 호출 시 Provider와 Consumer 컴포넌트 반환 initialValue는 Provider를 사용하지 않았을때 적용될 초기값을 의미

createContext(initialValue)

useContext

생성된 context를 컴포넌트에 전달받음 context의 변화를 감시 설정한 상태를 불러옴

const data = userContext(Context)
Context.jsx
import React, {createContext, useContext} from 'react'

const MyContext = createContext('defaultValue');

function Child(){
    const text = useContext(MyContext);
    return <div>HI{text}</div>
}

function Parent(){
    return <Child/>
}

function GrandParent(){
    return <Parent/>
}

function Context(){
    return <MyContext.Provider value = "GOOD!">
                <GrandParent/>
            </MyContext.Provider>
}

export default Context
const MyContext = createContext('defaultValue'); // createContext로 만들어진 변수 (MyContext)는 컴포넌트 처럼 쓰임
<MyContext.Provider value = "GOOD!"> //createContext로 만들어준 컴포넌트에는 Provider 프로퍼티가 들어있음. provider 프로퍼티를 통해 value값 설정.

useContext - 유동적으로

useState를 사용하여 유동적으로 변하는 기능을 추가함.

Context.jsx
import React, {createContext, useContext, useState} from 'react'

const MyContext = createContext('defaultValue');

function Child(){
    const text = useContext(MyContext);
    return <div>HI{text}</div>
}

function Parent(){
    return <Child/>
}

function GrandParent(){
    return <Parent/>
}

function Context(){
    const [value, setValue] = useState(true);

    return <MyContext.Provider value = {value ? "Good" : "Bad"}>
                <GrandParent/>
                <button onClick={() => setValue(!value)}>click!</button>
            </MyContext.Provider>
}

export default Context

출처 : Context API 를 사용한 전역 값 관리 [React] 리액트 Hooks : useContext() 함수 사용법 (전역 상태 관리)

]]> <![CDATA[React - useReducer, 커스텀 hook]]> https://velog.io/@s_honey1122/React-useReducer-%EC%BB%A4%EC%8A%A4%ED%85%80-hook https://velog.io/@s_honey1122/React-useReducer-%EC%BB%A4%EC%8A%A4%ED%85%80-hook Tue, 06 Dec 2022 02:12:05 GMT useReducer

useState의 대체 함수. (state, action) => newState의 형태. reducer를 받고 dispatch의 메서드와 짝의 형태로 현재 state를 반환.

const [state, dispatch] = useReducer(reducer, initialArg, init);
state //현재상태
dispatch //action으로 보내는 함수
reducer //연결되는 함수명
initialArg //초기값

useReducer사용하여 active 사용자 count하기

counter.jsx
import React, {useReducer} from 'react'

const Counter = () => {
    function reducer(state, action){
        switch(action.type){
            case 'INCREMENT':
                return state+1;
            case "DECREMENT":
                return state-1;
            default : 
                return state;
        }
    }

    const [number, dispatch] = useReducer(reducer, 0);


    const increase = () => {
        dispatch({type : "INCREMENT"})
    }

    const decrease = () => {
        dispatch({type : "DECREMENT"})
    }
  return (
    <div>
        <h1>{number}</h1>
        <button onClick={increase}>+1</button>
        <button onClick={decrease}>-1</button>
    </div>
  )
}

export default Counter
action// dispatch에서 보낸 객체를 parameter로 받아옴

custom hook

반복되는 로직을 쉽게 재사용 하기 위해 직접 만들어 사용하는 hook 보통 파일 이름은 Use-로 시작

user를 새로 input하는 custom hook을 만들어 보자

UseInputs.js
import {useState, useCallback} from 'react'

const UseInputs = (initialForm) => {
    const [form, setForm] = useState(initialForm);

    const onChange = useCallback((e)=> {
        const {name, value} = e.target;
        setForm(form => ({...form, [name]:value}))
    }, [])

    const reset = useCallback(()=>setForm(initialForm), [initialForm]);
    //form을 초기화
  return (
    [form, onChange, reset]
  )
}

export default UseInputs
setForm(form => ({...form, [name]:value})) // 객체 리터럴 표현을 반환하기 위해 함수 본문을 괄호속에 넣음.
App.js
import React, { useReducer, useCallback, useRef, useMemo }  from 'react'
import UserList from './components/UserList'
import CreateUser from './components/CreateUser'
import UseInputs from './components/UseInputs'

const initialState = {
  users : [
    {
      id : 1,
      username : 'jisung',
      email : 'jisung@gmail.com',
      Active : true
    },
    {
      id : 2,
      username : 'mark',
      email : 'marklee@naver.com',
      Active : false

    },
    {
      id : 3,
      username : 'jeongwoo',
      email : 'jeongwoo@gmail.com',
      Active : false
    }
  ]
}

function reducer(state, action){
  switch(action.type){
    case "CREATE_USER":
      return{
        users : state.users.concat(action.user)
      }
    case "TOGGLE_USER":
      return{
        ...state,users:state.users.map(user=>
          user.id === action.id ? {...user,active : !user.active}:user)
      }
      case "REMOVE_USER":
        return {
          ...state, users:state.users.filter(user=>user.id !== action.id)
        }
        default:
          throw new Error("액션 없음!");
  }
}

function countActiveUsers(users){
  return users.filter(user => user.active).length;
}
function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const {users} = state;
  const nextId = useRef(4);

  const [form, onChange, reset] = UseInputs({
    username : "",
    email : ""
  });

  const {username, email} = form;

  const onToggle = useCallback((id)=>{
    dispatch({
      type : "TOGGLE_USER",
      id
    })
  }, [])

  const onRemove = useCallback((id)=>{
    dispatch({
      type : "REMOVE_USER",
      id
    })
  }, [])

  const onCreate = useCallback(()=>{
    dispatch({
      type : "CREATE_USER",
      user : {
        id : nextId.current,
        username,
        email
      }
    })
    reset();
    nextId.current+=1;
  }, [username,email,reset])

  const count = useMemo(()=>countActiveUsers(users), [users])

  return (
    <>
      <CreateUser 
        username={username} 
        email={email} 
        onChange={onChange} 
        onCreate={onCreate} 
      /><br/>
      <UserList users={users} onToggle={onToggle} onRemove={onRemove}/><br />
      <div>Active 상태의 사용자 수 : {count} </div>
    </>
  );
}

export default App;

출처 : useReducer 커스텀 hooks 만들기

]]> <![CDATA[React - useMemo, useCallback]]> https://velog.io/@s_honey1122/React-useMemo-useCallback https://velog.io/@s_honey1122/React-useMemo-useCallback Tue, 06 Dec 2022 02:11:47 GMT useMemo

메모이제이션(memoization)된 값을 반환 함수형 컴포넌트 - 렌더링 -> Component함수 호출 -> 모든 내부 변수 초기화 = 호출하는 함수가 무거운 함수라면, 매우 비효율적 --> useMemo가 해결 useMemo - 렌더링 -> Component함수 호출 -> Memoize된 함수 재사용 값을 재활용 하기 위해 따로 메모리르 소비하여 저장 -> 꼭 필요할 때에만 사용

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
computeExpensiveValue(a, b) // 콜백함수
[a, b] // 배열
배열의 요소 값이 업데이트 될 때만 콜백함수를 호출하여 memoization된 값을 업데이트 -> memoization을 해줌.
메모이제이션 ? 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장 -> 동일한 계산 반복 수행 제거 -> 컴포넌트의 성능 최적화.

active상태의 사용자의 수를 count

App.jsx
import React, {useRef, useState, useMemo} from 'react';
import './App.css';
import CreateUser from './CreateUser';
import UserList from './UserList';

function countActiveUsers(users){
  return users.filter(user => user.active).length;
}
function App() {
  const [inputs, setInputs] = useState({
    username : '',
    email : ''
  })

  const {username, email} = inputs;

  const onChange = (e) => {
    const {name, value} = e.target;
    setInputs({...inputs, [name]:value})
  }


  const [users, setUsers] =useState([  
    { id:1, 
      username:'jisung', 
      email:'jisung@gmail.com',
      active : true
    },
    { id:2, 
      username:'mark', 
      email:'marklee@naver.com',
      active : false

    },
    { id:3, 
      username:'jungwoo', 
      email:'jungwoo@gmail.com',
      active : false
    },
  ]);
  const nextId = useRef(4);

    const onCreate = () => {
      const user = {
        id : nextId.current,
        username,
        email
      }

      nextId.current += 1;

      setUsers(users.concat(user));

      setInputs({
        username  :'',
        email : ''
      })
    }

    const onRemove = (id) => {
      setUsers(users.filter(user => user.id !==id));

    }

    const onToggle = (id) => {
      console.log(id);
      setUsers(users.map(user =>
        user.id == id? 
        {
          ...user, 
          active:!user.active
        }
          :
          user
          )
      )
    }

    const count = useMemo(()=>countActiveUsers(users),[users]);

  return (
    <>
      <CreateUser
        username = {username}
        email = {email}
        onCreate = {onCreate}
        onChange = {onChange}
      />
      <UserList users = {users} onRemove={onRemove} onToggle = {onToggle}/>
      <div>Active 상태의 사용자 수 : {count}</div>
    </>
  );
}

export default App;

useCallback

메모이제이션된 콜백을 반환. useCallback(fn, deps)은 useMemo(() => fn, deps)와 같음 useMemo보다 함수를 위해 사용 할 때 더욱 편안.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);
App.jsx
import React, {useRef, useState, useMemo, useCallback} from 'react';
import './App.css';
import CreateUser from './CreateUser';
import UserList from './UserList';

function countActiveUsers(users){
  return users.filter(user => user.active).length;
}
function App() {
  const [inputs, setInputs] = useState({
    username : '',
    email : ''
  })

  const {username, email} = inputs;

  const onChange = useCallback((e)=>{
    const {name, value} = e.target;
    setInputs({...inputs, [name]:value})
  }, [inputs])

  const [users, setUsers] =useState([  
    { id:1, 
      username:'jisung', 
      email:'jisung@gmail.com',
      active : true
    },
    { id:2, 
      username:'mark', 
      email:'marklee@naver.com',
      active : false

    },
    { id:3, 
      username:'jungwoo', 
      email:'jungwoo@gmail.com',
      active : false
    },
  ]);
  const nextId = useRef(4);

    const onCreate = () => {
      const user = {
        id : nextId.current,
        username,
        email
      }

      nextId.current += 1;

      setUsers(users.concat(user));

      setInputs({
        username  :'',
        email : ''
      })
    }

    const onRemove = (id) => {
      setUsers(users.filter(user => user.id !==id));

    }

    const onToggle = (id) => {
      console.log(id);
      setUsers(users.map(user =>
        user.id == id? 
        {
          ...user, 
          active:!user.active
        }
          :
          user
          )
      )
    }

    const count = useMemo(()=>countActiveUsers(users),[users]);

  return (
    <>
      <CreateUser
        username = {username}
        email = {email}
        onCreate = {onCreate}
        onChange = {onChange}
      />
      <UserList users = {users} onRemove={onRemove} onToggle = {onToggle}/>
      <div>Active 상태의 사용자 수 : {count}</div>
    </>
  );
}

export default App;

출처 : HookAPIReference 메모이제이션 useMemo 사용법 및 예제

]]>