React JS - 04

1. react app 만들어서 사용하기

 - 'npx create-react-app 파일명'  명령어를 터미널에 입력하여 react app 을 생성할 수 있음.

- 위의 명령어로 처음 react app을 생성한 후 'npm start' 명령어를 사용하면 나타나는 첫 화면

 - App.js, index.js 파일 외 다른 파일 모두 제거 

 - 이전에 공부했던 내용 사용해 보기 (useState, onClick)

 - react 는 새로운 값이 변경될 때 변경되는 부부만 그리는데 다시 그릴 때 app 함수의 모든 코드를 한 번씩 실행한 후 바뀐 부분을 수정하는 형식이다.

 - 따라서  useEffect 를 이용해서 처음으로 화면이 그렬질 때 한 번만 실행될 코드를 설정할 수 있다. 

 - [ useEffect (함수, [keyword]) ] - 뒤에 자세히 설명 , 앞의 형식으로 사용 가능하다. 

 오류

 + 오류발생 : useEffect 는 한 번만 실행되어야하는데 콘솔에 두 번씩 나와서 확인해 보니 index.js 파일에서 <React.StricMode> 로 묶여있는 것이 문제였음. 즉 StricMode 태그는 react 개발환경에서 제공하는 서비스로 개발 단계에서 오류를 잡기 위해 두번씩 실행되는 서비스라고 한다... (구글링해서 찾았슴당)

import Button from "./Button";
import {useEffect, useState} from "react";

function App() {
  const [counter, setCounter] = useState(0); 
  const onClick = () => {setCounter(prev => prev + 1)}
  console.log("i run all time");
//   const runOnlyOnce = () => {
//     console.log("i run only once.");
//   }
//   useEffect(runOnlyOnce, []);
useEffect(()=> {
    console.log("call the api");
}, []);
  return (
    <div>
      <h1>Welcome backk</h1>
      <Button text={"react"}/>
      <button onClick={onClick}>{counter}</button>
    </div>
  );
}

// state 가 변하면 모든 code 가 render 된다. 즉 처음 render 할 때 한번만 코드를 실행하기 위해서 useEffect 를 사용함.
// 예를 들어 api 를 가져와서 보여준 다음에 state가 변할 때마다 같은 api 를 또 가져오는 경우는 필요가 없다.  
// i run all time 이 두 번씩 실행  -> React.StrictMode 를 지우니깐 정상실행 이유는???
export default App;

2. useEffect 사용

 - 위에서 설명했듯이 useEffect 는 처음으로 앱이 render 될 때만 실행되는 함수를 지정하는 기능을 지원한다.

 - 그런데 여기서 특정한 경우에만 실행되는 함수를 지정하는 기능 또한 useEffect를 통해 구현할 수 있다. 

 - [ useEffect (function, [keyword])] : keyword 가 변화할 때마다 실행하는 함수를 지정할 수 있다. 

- 아래 코드에서 input 태그에 작성하는 keyword 가 변화할 때 마다 console에 "search " + keyword 를 출력할 수 있다. 

 - 만약 밑의 버튼이 눌릴 때마다 console 에 출력하고 싶으면 [ keyword, counter ] 로 리스트를 설정해 구현할 수 있다. 

import Button from "./Button";
import {useEffect, useState} from "react";

function App() {
  const [counter, setCounter] = useState(0); 
  const [keyword, setKeyword] = useState("");
  const onClick = () => {setCounter(prev => prev + 1)}
  const onChange = (event) => setKeyword(event.target.value);
  console.log("i run all time");

useEffect(()=> {
    console.log("call the api");
}, []);
useEffect (() => {
  if(keyword != ""){
  console.log("Search ", keyword);
  }
}, [keyword]);
  return (
    <div>
      <h1>Welcome backk</h1>
      <input value={keyword} onChange={onChange} type="text" placeholder="Search here" />
      <button onClick={onClick}>{counter}</button>
    </div>
  );
}

// input 값이 바뀌어 keyword에 저장하는데 변할 때마다 render 하고 있음 따라서 useEffect 를 이용해서 한 번만 수행하도록 하는 것이 좋당~ 
// keyword 를 넘겨주어 keyword 가 변할 때에만 실행되도록 기능 작동 가능
export default App;

 - input 입력창에 작성된 keyword의 값이 5자 이상이면서 빈칸이 아닌 경우 && 버튼을 누를 때 콘솔에 출력되도록 약간 코드를 수정함.

 

3. component create && destroyed

 - 화면에 component 를 조건에 따라 보이게 할수도 있고 안 보이게 설정할 수 있다. 

 - 보이게 할 때는 component 를 생성하는 코드를 실행하는 것과 같다. 

 - 그런데 안보이게 할 때는 생성된 component 를 파괴하는 것으로 component 가 없어질 때도 함수를 실행시킬 수 있다. 

 - [ retrun () => {함수 내용}] : 형식으로 return 함수로 component 가 없어질 때 실행할 수 있다. 

 - 또한 태그 생성 시 prop 을 넘겨주는데 prop 은 특정한 자료형을 가진 데이터들이다. 

 - 이를 제한하기 위해 prop-types 를 이용해 특정 prop 에는 설정한 자료형이 오도록 제한할 수 있다. 

import { func } from "prop-types";
import Button from "./Button";
import {useEffect, useState} from "react";

function Hello() {
  // useEffect(() => {
  //   console.log("created :) ");
  //   return() => console.log("destroyed :(");
  // }, []);

  // function effectFn () {
  //   console.log("created");
  //   return () => console.log("destroyed");x
  // }
  // useEffect(effectFn, []);

  function bye () { console.log("bye");}
  function hi () { console.log("hi"); return bye;}
  useEffect(hi, []);
  return <div>Hello !!</div>
}
function App() {
  const [show, setShow] = useState(false);
  const onClick = () => setShow(current => !current);
  return(
    <div>
      {show ? <Hello /> : null}
      <button onClick={onClick}>{show ? "HIDE" : "SHOW"}</button>
    </div>
  )
} 

// component 가 없어질 때 즉 destroy 될 때 실행할 수 있는 방법 있음.
export default App;

 

일단 이론적으로 공부하는 건 여기까지고 

이후부터 기능을 갖는 react app을 만들예정입니당