ReactJS 프로젝트 정리 요약

React js는 어플리케이션이 아주 interactive하게 만들어주는 library이다

react-dom은 library, package인데

모든 React element 들이 HTML body에 둘 수 있게 해 준다.

 

React JS는 엔진 같은 역할 

=> 암기하지 말고 이해해보려 해라 

ReactDOM.render();

render() 유저에게 보여주는 것

 

---

브라우저가 JSX를 이해할 수 있도록 BABEL을 설치해야 한다. 

---

 

<Btn banana="Confirm" />

컴포넌트에 위와 같이 속성 이름과 값을 지정하면 function에서 props로 변수를 받아서 props.banana와 같이 꺼낼 수 있다

---

 

<Btn txt={value} onClick={changeValue} />

이렇게 컴포넌트에 작성되어 있는 onClick 은 이벤트 리스너가 아니라 하나의 props 이다 

 

---

컴포넌트를 re-rendering하고 싶지 않을 때 사용하는 개념 "Memo"

const MemorizedBtn = React.memo(Btn);

 function Btn({ txt, changeValue }) {
    return (
      <button
        onClick={changeValue}
        style={{
          backgroundColor: "tomato",
          color: "white",
          padding: "10px 20px",
          borderRadius: 10,
          border: 0,
        }}>{txt} </button>
    );
  }

  const MemorizedBtn = React.memo(Btn);


  function App() {
    const [value, setValue] = React.useState("Save Changes");
    const changeValue = () => {
      setValue("Revert Changes");
    }
    return (
      <div>
        <MemorizedBtn txt={value} changeValue={changeValue} />
        <MemorizedBtn txt="Continue" />
      </div>
    );
  }

  const root = document.getElementById("root");
  ReactDOM.render(<App />, root);

---

 

State란?

기본적으로 데이터가 저장되는 곳이다

React.js는 전체를 로딩하는 것이 아니라 값이 바뀐 부분만 로딩한다.
=> Interactive 하다는 뜻

데이터가 변경될 때마다 Container를 rerenddering 하는 것이 필요하다

하지만 매번 re rendering 하는 것이 효율적은 방법은 아니다

 

---

 

1. React 변수 사용

컴포넌트나 JSX에 변수를 추가하고 싶을 때 
{   }  사용

 

2.업데이트 시 render 함수 사용

UI를 업데이트 하고 싶으면 변화된 부분을 보여주고 싶다면
render 함수를 호출해야 한다. 

 

 3. useState

배열의 첫번째 값은 초기값이고 

두번째 값은 값을 바꾸는 함수이다.

배열에 담긴 요소들을 각각의 값으로 꺼내는 방법

const food = ["tomato", "potato"];

const [myFavFood, mySecondFavFood] = food;

변수 myFavFood에는 tomato 가 mySecondFavFood에는 potato 값이 할당 된다.

---

useState를 사용할 때 첫번째 변수는 초기값, 두번째 변수는 값을 변경하는 함수라고 이야기 했었다.

오늘은 그 두번째, 변수의 값을 변경하는 함수 modifier에 대해서 알아본다.

setCounter(counter + 1);

 

위의 코드가 그냥 counter + 1 하는 거지 
counter 변수값이 변경 되는 건 아니지 않나 생각했는데

const [counter, setCounter] = React.useState(0);

 

React.useState의 두 번째 함수 기능 자체가 첫번째 변수의 값을 변경하는 거라서 
count = count + 1 로 이해하면 되는 것 같다

 

modifier 함수를 사용해 state, 즉 어플리케이션의 데이터를 바꿀 때 새로운 값을 가지고  컴포넌트 전체가 재생성된다. 

"state가 바뀌면 re-rendering이 일어난다"

 

---

state 값을 바꾸는 두 가지 방법이 있다. 

1. 우리가 이미 한 방법

setCounter(counter + 1)

 

2. 이전 값을 이용해 현재 값을 설정하는 법

setCounter((current) => current + 1);

 

현재 state 값을 바탕으로 변경하고 싶으면, 위와 같은 방법으로 변경할 수 있고 
이 방법이 더 안전하다

---

 

jsx는 html과 비슷하지만 다른 몇 가지가 있다
1) class를 사용하면 안된다 > className 으로 사용
2) for를 사용하면 안된다 > htmlfor 사용

 minutes에 필요한 

 

 

useState는 array를 제공하고 첫번째 element가 현재 값이 된다.

 

setState 함수의 특징
데이터 값을 변경해주는 것과 동시 화면도 변경한다.

 

production - > development 로 변경하는데
production은 배포 모드, development는 개발 모드를 의미합니다.
개발모드는 니코쌤이 보여준 것 처럼 버그로 이어질 수 있는 요소들을 미리 경고하는 검증 코드가 포함되어 있습니다.

 

---

Jsp 기반의 html에서는 input element에 value 속성이 지정된 것과 관계없이 입력이 가능하지만 React에서는 value 속성을 value={value} 와 같이 성하면 값이 입력되지 않는다.

 

input element에 value 속성만 지정하면 value 속성으로만 값을 control 할 수 있는 권한이 있기 때문에, 즉 사용자가 값을 입력하는 권한이 없다. 그런 의미에서 input 내 값이 변경되지 않는 것이다. 

---

지난 시간에 살펴본 current 사용  

    // const onFlip = () => setFlipped(!flipped);
    const onFlip = () => setFlipped((current) => !current);

일반적으로 input 요소에 작성하는 disable은 아래와 같이도 작성 가능하다.

disabled={flipped === true}

---

propsType이라는 패키지에서 나온 문자 타입 확인하는 것

React JS에게 타입을 알려준다

 

PropTypes 설치

<script crossorigin src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>

 

컴포넌트에 isRequired 설정이나 타입을 가능하며 

  Btn.propTypes = {
    text: PropTypes.string,
    fontSize: PropTypes.number.isRequired,
  }

 

default 값을 설정할 수 있다

function Btn({ txt, changeValue, fontSize = 14 }) {

 

 

---

React Project 설치

react-movie-list 라는 폴더 이름으로 React 프로젝트를 생성합니다

npx create-react-app react-movie-list

 

 

---

propTypes 설치

$ npm i prop-types

module.css

전체 전역적인 css를 불러오는 것이 아닌 특정 요소에 필요한 style만 불러오고 싶을 때 module.css와 같은 방법을 이용할 수 있다. 

import styles from './Button.module.css';

function Button({ txt, bgc = 'red' }) {
  return (
    <button className={styles.btn}>{txt}</button>
  )

 

---

useEffect

한 번만 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, setValue] = useState(1);
  function onClick() {
    setValue((prev) => prev + 1);
    console.log("I run all the time");
  }
  // const iRunOnlyOnce = () => {
  //   console.log("I run only once");
  // }
  useEffect(() => { console.log("CALL THE API") }, []);

  return (
    <div>
      <h1 className={styles.title}>{counter}</h1>
      <Button onClick={onClick} txt="This is a button" bgc='red' />
    </div>
  );
}

export default App;

 

useEffect 사용방법

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');
  }, [counter, keyword]);

 

• 리액트를 사용하는 이유: 최소 단위의 렌더링을 위해
• useState(): 변수, 변수를 제어하는 함수로 구성되며 변하는 값을 제어, 해당 부분의 리렌더링을 위함
• props: 태그의 속성 값을 함수의 아규먼트 처럼 컴포넌트에 값을 전달해준다.
• useEffect(): 코드의 실행 시점을 관리할 수 있는 선택권을 얻는 방어막 같은 존재, 디펜던시가 없을 경우 최초 1회 실행, 있을 경우 해당 값이 변할 경우 실행한다. 이 때 디펜던시는 여러개 입력이 가능하다.

🏴 부모 컴포넌트에서 리렌더링이 일어날 경우 모든 자식들이 리렌더링이 된다.(wa can use memo)
🏴 propType을 설치하고 props의 타입을 지정해 줄 수 있다. 이 때 isRequired로 필수값을 지정 가능

 

---

컴포넌트가 생성될 때와 사라질 때 함수를 실행하고 싶다면

bye 함수처럼 하나의 함수에 return 값에 넣으면 사라질 때 실행이 된다  

function Hello() {
  function byeFn() {
    console.log('bye :>');
  }
  function hiFn() {
    console.log('hi :-)');
    return byeFn;
  }
  useEffect(hiFn, []);
  return <h1>Hello</h1>
}

// 위의 코드를 아래 코드로 간단하게 변경

function Hello() {
  useEffect(() => {
    console.log('hi');
    return function () {
      console.log('bye');
    }
  }, []);
  return <h1>Hello</h1>
}

 

---

복습

※ state를 직접 수정할 수 없었다

toDos.push(); // 불가능

 

배열 합칠 때 유용한 ...

const food = [1,2,3,4,5];
const newFood = [100, ...food];

 

submit 동작을 막는 함수

event.preventDefault()

 

배열의 map() 함수

map() 함수는 첫번째 arument로 현재의 item을 가져올 수 있다

또한 index도 사용 가능!

const fruits = ['orange', 'banana', 'kiwi'];
fruits.map((c, i)=> `${i+1}. ${c}`); 

// 결과 ['1. orange', '2. banana', '3. kiwi']

경고 

같은 component의 list를 render할 때는 key라는 prop을 넣어줘야 한다 

고유한 key가 필요하다 

react가 기본적으로 list에 있는 모든 item들을 인식하기 때문이다

> 무슨 뜻인지 모르겠음

<ul>
	{toDos.map((item, index) => (
    	<li key={index}>{item}</li>
    ))}
</ul>