React Clonecoding [use create app]

use-create-app을 하다.

• index.html 파일안에서 react와 reactdom을 호출하고 코딩하는 시기를 지나서 터미널을통해 package를 다운받았다.

• 여전히 return값안에 출력하고자하는것들을 담았고 props를 쓸 수 있었다.

• 달라졌다면 한 파일 안에서 작성하던 요소들이 여러 파일로 나뉘어 button.js app.js같이 나뉘었고 그것들을 사용하기위해 export와 import를 사용하는것이었다.

• proptypes는 package에 내장되어있지 않는 것 같다. Button의 text props를 줄때 text:any라고 되어있는것이 보기좋지않아 배운방식대로 proptypes를 쓰려했지만 터미널에선 '그런거없음'이라고 나왔다.

터미널에 위와같이 입력해주면 설치가되며

아래와 같이 import하면 사용할 수 있다.

CSS modules, divide and conquer

index.js에선 렌더링이 되고있다 이곳에 css 파일을 import하여 사용하고 만약 button element에 backgroundcolor나 color를 줄경우 모든 index내 렌더링되는 button에 적용될 것이다. 우린 이걸 원치 않는다.

그렇다면 각각의 button에 style={{}}을 부여해줄 수 있을것이다. 하지만 이 또한 효율적이지 않다.

index에서 호출해버리면 다 적용해버리는 styles.css라는 파일의 이름을

Button.module.css 파일로 이름을바꾸고 button tagname을 btn class로 바꾼다.

이 파일을 index.js에서 호출하는것이 아닌 사용하는 직접적인 파일 Button.js에서 위와같이 호출하고 className에 부여하여 사용한다.

이 작업의 이면에서 CRA(create React App)는 우리가 작성한 CSS코드를 JS object로 변환시켜준다. 그 object의 이름은 위에서 styles로 했으며 btn을 가지고있다.

이렇게 작성한 button은 무작위 class를 엏게된다.

컴포넌트를 분리해서 만들 수 있으며, 분리된 컴포넌트만를 위한 CSS를 만들어 줄 수 있다.

만약 우리가 두개의 다른 모듈에서 같은 classname을 사용해도 랜덤방식으로 생성되기 때문에 겹치는 일이 없다.

UseEffect

특정 코드의 실행을 제한한다.
이 말을 들었을때 내가 React.memo강의를 다시 듣고있나? 라는 생각이 들었다.

UseEffect는 두 개의 argument를 가지는 function이다.
useEffect 함수를 호출하고 첫번째 인자로 한번만 실행할 function을 주고 두번째 인자로는 빈 Array를 주었다.

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () =>{
    setValue((prev) => prev+1);
  }
    console.log("i run all the time");

  useEffect(()=>
  {console.log("call the api")},[]);
  return (
    <div>
      <h1 className={styles.title}>{counter}</h1>
      <Button  text="continue" changeValue={onClick}/>
    </div>
  ); 
}

실행하면 둘 다 처음 화면 렌더링 시 호출되어서 console에 남지만, click이벤트가 일어날때 더이상 call the api는 console에 나타나지 않았다.

Use Effect vs Use memo

여기까지 수업을 들었을 때 이 둘이 무슨 차이야 라는 생각이 들어 영상의 comment를 찾아보았는데

한 회원분이 이렇게 정리해주셨다. 이걸로도 다 이해가 가지않아 유튜브에서 인도스러운 영어를 쓰시는분의 강의를 들었지만 그냥 영어도 어려운데 인도풍의 style은 더 어려워서 이해가 잘 되지 않았다.. 이래서 영어가 개발자 0순위 언어라고 하는가보다.. 😂

나중에 더 알아보고 포스팅을 고쳐야겠다.

Dep[dependency][지켜보려는것]

우리가 검색API는 검색할때만 호출하고 싶고 다른 state를 변경했을때는 검색 API가 필요하지 않을 것이다.

두 가지 변화하는 state가 있다.
keyword state가 변화하면 모두 재실행되면서 console.log의 2개 구문도 찍혀나온다. 하지만 우린 keyword가 바뀔때만 "you search for~~" 구문을 보여주고싶지 onClick할때도 보이는걸 원하지 않는다.

위와같이 []안에 keyword를 입력해주면 더이상 click을 눌러도 keyword관련 부분은 코드가 실행되지 않는다. 우리는 괄호에 keyword를 줌으로써 react에게 keyword를 지켜보다가 바뀌면 첫 번째 인자의 코드를 실행해줘 라고 말한것이다. 그렇기에 앞에 call the api는 지켜볼 것이 없기에 한번 실행되고 끝난다.

useEffect( () => {
    if(keyword !== "" && keyword.length > 5){
      console.log ("Search For", keyword);
    }
},[keyword]);

첫번째 인자에 위와같이 조건문을 추가하여 원하는 시기를 좀더 좁게 설정할수도 있다. 두번째 인자는 Array이기때문에 여러개를 넣을수도있다.
1. 빈 Array를 준다 = 단 한번 실행.
2. Array에 하나의 item을 준다 = 특정 item이 변하면 첫 인자 코드 실행
3. Array에 하나 이상의 item을 준다 = 해당 item이 변하면 코드 실행

결론, 우리는 useEffect를 통해 언제 코드가 실행될지 결정하는 방법을 배웠다.

cleanup function

function Hello(){
  useEffect( () => (console.log("나 불러졌다")), [])
  return(
  <h1>Hello</h1>
  )
}

function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => {
    setShowing((prev)=> !prev);
  }
  return (
    <div>
    {showing ? <Hello/> : null}  
    <button onClick={onClick}>{showing ? "hide" : "Show"}</button>
    </div>
  ); 
}

위에선 button을 눌러 h1을 생성했다 파괴했다 할 수 있다. 보여주는 순간에 Hello가 컴포넌트로써 생성되므로 Hello 내의 모든 코드가 실행된다.

파괴한다고 하는 이유는 hide한 h1, hello는 존재한체 숨는것이 아니라 body 내에서 아예 사라진다. 우리가 작성한 useEffect는 생성될 때 사용되는것이다.

function Hello(){
  useEffect( () => {
    console.log("난 만들어졌다");
    return () => console.log("난 파괴됐다.");
}, [])
  return(
  <h1>Hello</h1>
  )
}

위와같이 return 구문을 추가해주면 component가 파괴될 때 뭔가를 하게 만들 수 있다.

function Hello(){
  function destroyedFn(){
    console.log("난 파괴됐다")
  }

  function effectFn(){
    console.log("난 만들어졌다");
    return destroyedFn;
  }
  useEffect( effectFn, [])
  return(
  <h1>Hello</h1>
  )
}

위 아래 코드는 같은 기능을 한다.

arrow function과 일반적인 function.

이론 끝!