30부부 클럽

안녕하세요

초보 코더입니다.

이번에는 useRef를 알아볼건데요.

코드는 아래와 같습니다.

import React, { useRef } from "react";

export default () => {
  const potato = useRef();
  setTimeout(() => potato.current.focus(), 5000);
  return (
    <>
      <div>hello</div>
      <input ref={potato} placeholder="what your name"></input>
    </>
  );
};

potato 변수에 useRef를 사용하고.

input 태그에 ref를 연결해줍니다.

(useRef는 document.querySelector()와 같습니다.

potato 변수 밑에 setTimeout 함수를 넣어서 potato(input태그)가 5초뒤에 포커스 되는 것을 넣었습니다.

렌더링 시작 후 input 태그에 focus가 없지만 5초뒤에는?!

자동으로 포커스가 됩니다!!

쉽죠!?

안녕하세요.

초보 코더입니다.

이번에는 useReducer에 대하여 알아볼건데요..

저도 어렵네요.

우선 배운 코드는 아래와 같습니다.

import React, { useReducer } from "react";

const INCREMENT = "increment";
const DECREMENT = "decrement";

const reduceFunction = (state, action) => {
  if (action === INCREMENT) {
    return { count: state.count + 1 };
  } else {
    return { count: state.count - 1 };
  }
  
  // switch (action.type) {
  //   case INCREMENT:
  //     return { count: state.count + 1 };
  //   case DECREMENT:
  //     return { count: state.count - 1 };
  //   default:
  //     throw new Error();
  // }
};

function App() {
  const [state, dispatch] = useReducer(reduceFunction, { count: 0 });
  return (
    <div>
      <div>{state.count}</div>
      <button onClick={() => dispatch(INCREMENT)}>increment</button>
      <button onClick={() => dispatch(DECREMENT)}>decrement</button>
      
    <!--<button onClick={() => dispatch({ type: INCREMENT })}>increment</button>
    <button onClick={() => dispatch({ type: DECREMENT })}>decrement</button> -->
    </div>
  );
}

export default App;

reduceFunction에서 if문과 switch문과는 동일한 내용입니다.

function App에서 useReducer을 사용하는데요. 

여기서 받는 인자 2개에서 앞에는 fn을 뒤에는 state 초기값으로 보시면됩니다.

그리고 useReducer가 실행될때 첫번째 받은 함수(reduceFunction)이 실행되면서 버튼onClick에 있는 dispatch함수가 같이 실행이됩니다. dispatch함수 내 인자를 받게되는데요.

해당 인자가 if문(또는 swich문)에서 조건으로 작용하여 state를 바꾸게 됩니다.

그럼 +1 또는 -1이 됩니다!!

끝!

안녕하세요

초보코더입니다.

현재 react-hook을 공부하고 있는데요!

useEffect에서 간단하게 공부를해봅시다.

import React, { useState, useEffect } from "react";

const App = () => {
  const sayHello = () => console.log("hello!");
  const [number, setNumber] = useState(0);
  const [aNumber, setANumber] = useState(0);
  useEffect(() => {
    sayHello();
  }, [number]);

  return (
    <>
      <h1>hello</h1>
      <button onClick={() => setNumber(number + 1)}>{number}</button>
      <button onClick={() => setANumber(aNumber + 1)}>{aNumber}</button>
    </>
  );
};

export default App;

number, aNumber의 state를 만들었습니다.

useEffect 함수에서 sayHello 함수를 호출하게 만들었습니다.

그리고 {},[number] 이라는 조건을 넣어놨는데. number이라는 state만 바뀔때 sayHello() // console.log("hello!")를 호출합니다.

useEffect는 componentDidMount와 componentDidUpdate 를 합친 형태와 비슷합니다.

시작했을 때 콘솔창에 hello를 한번 출력합니다.

화면의 모습은 아래와 같습니다.

앞쪽 버튼을 누르면 누른만큼 state가 변하며 sayHello를 호출합니다 (콘솔창참고)

두번째 버튼을 누르면 조건을 넣었기 때문에 

콘솔창을 출력하지 않습니다.

아직 공부하는 중이라 부족한 부분이 많네요.

혹시나 틀린 부분이 있으시면 답남겨주시면 수정토록할게요!

감사합니다.

안녕하세요.

초보 코더 입니다.

해당 내용으로 블로그를 쓰기엔 너무 초보적인 부분인데.. (제가초보라서)

react hook을 공부하다보니.. 인강에서 나온부분이 실행이 안되길래 찾아보았습니다.

여러가지 이유가 있지만 첫번째 이유가! 바로! react 최신 버전이 hook을 지원하지 않는다는...

(20.02월 기준 16.8까지 hook을 지원한다고 되어 있네요.)

저는 항상

$ npx create-react-app Project

으로 react를 설치하는데요.

package.json 파일에 가보니

    "react": "^16.12.0",

    "react-dom": "^16.12.0",

로 설치가 되어있었습니다.

저는 react 버전을 낮추는 방법을 몰랐는데..

기존에 항상 패키지를 잘 설치해왔음에도.. 몰랐다는..

그래서 정답은.!

$ yarn add react@16.8.0

$ yarn add react-dom@16.8.0

으로 설치해주시면됩니다..

이렇게 쉬운걸 적기가 좀 그렇지만.. 저와 같은 초보 코더분들을 위해..간단하게 적어봅니다..(사실 이러때문에 20~30분동안 찾음-0-)

그럼 즐코딩되세요!

안녕하세요.

react를 열심히 독학으로 공부하고 있는 초보 코더입니다.

매번 npx create-react-app만 설치하다보니. npm react설치 법을 까먹었더라구요..

너두 초보적인 부분이라 간단하게 적어봅니다.

저는 보통 VS-CODE를 사용하는데요.

1. 우선 react를 글로벌로 설치합니다.

$ npm install -g create-react-app

2. 이후에 저는 2020react 라는 폴더를 만들었는데요.. ( 숫자가 앞에 붙은건 그렇게 좋지 않아보입니다..)

새로 생성한 폴더에 들어가서 react 를 설치합니다.

$ mkdir 폴더명

$ cd 폴더명

$ npm create-react-app .   

(. 점을꼭넣으세요)

끝!