[React 강의 노트(1)] React

react강의 노트 | Byte Degree [3주차]

 

react

virtual DOM

component

 

작업환경세팅

- node.js / yarn(npm과 비슷한데 패키지 설치시 npm보다 빠르다.) / VScode

(+ git bash에서 자신의 경로 확인하기-pwd)

 

 

JSX의 기본 규칙 알아보기

- html처럼 생겼지만 js이다 -> babel이라는 도구가 변환해줌

- 닫는 태그는 꼭 작성해야한다.

- 두개 이상의 태그는 하나의 태그로 감싸야한다 <></> flagment

- '-'말고 camelCase로 작성해야한다.

- style 적용시 html 처럼 inline으로 작성 X, 객체로 만들어서 사용해야한다. style={style}

- class X, classname 사용

- 주석은 대괄호로 감싸기 {/*~~~*/}

 

 

porps를 통해 component에게 값 전달하기

- 기본값 추출을 위해서는 defaultProps 사용

 

Hello.defaultProps = {
  name: "이름없음",
};

 

//App.js
import React from "react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" />
      <Hello color="pink" />
    </Wrapper>
  );
}

export default App;

//wrapper.js
import React from "react";

function Wrapper({ children }) {
  const style = {
    border: "2px solid black",
    padding: 16,
  };
  return <div style={style}>{children}</div>;
}

export default Wrapper;

 

(- props.children = {children})

- children 으로 component안에 component 넣기

 

 

조건부 렌더링

- 특정 조건이 참인지 거짓인지에 따라 다른 결과를 렌더링 하는것

 

//App.js
import React from "react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial={true} /> //isSpecial 만 작성해도 true로 인식
      <Hello color="pink" />
    </Wrapper>
  );
}

export default App;

//Hello.js
import React from "react";

function Hello({ color, name, isSpecial }) {
  return (
    <div
      style={{
        color,
      }}
    >
      {isSpecial ? <b>*</b> : null} //보여주고 안보여주고는 and 연산자가 더 깔끔하다(본 코드는 삼항연산자임)
      안녕하세요{name}
    </div>
  );
}

Hello.defaultProps = {
  name: "이름없음",
};

export default Hello;

 

(+ {false}, {undefined}, {null} 모두 출력이 안되지만  {0}은 출력됨)

- 삼항연산자 {isSpecial ? <b>*</b> : null}

- and 연산자 {isSpecial && <b>*</b>} - 단순히 보여주고, 숨기고에서는 and 연산자를 사용하는 것이 깔끔하다

- props를 boolean 값으로 사용하는 경우, 이름만 넣어주고 값설정을 하지않았을 때 true와 동일한 의미를 가진다.

 

 

useState를 통한 동적 상태 관리

 

import React, { useState } from "react";

function Counter() {
  const [number, setNumber] = useState(0);

 /* const onIncrease = () => {
    setNumber(number + 1);
  };

  const onDecrease = () => {
    setNumber(number - 1);
  };*/
  
  // 업데이트 함수, component 최적화하기
  const onIncrease = () => {
    setNumber((preNumber) => preNumber + 1);
  };

  const onDecrease = () => {
    setNumber((preNumber) => preNumber - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

 

리액트에서 input 상태 관리하기

 

import React, { useState } from "react";

function InputSample() {
  const [text, setText] = useState("");

  const onChange = (e) => {
    setText(e.target.value);
  };

  const onReset = () => {
    setText("");
  };

  return (
    <div>
      <input onChange={onChange} value={text} /> //vlaue={text}는 초기화시 같이 reset되기 위해
      <button onClick={onReset}>초기화</button>
      <div>
        <p>값 : </p>
        {text}
      </div>
    </div>
  );
}

export default InputSample;

 

 

여러개의 input 상태 관리하기

 

- useState 여러개 작성하지 않고 상태 관리하기

 

import React, { useState } from "react";

function InputSample() {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: "",
  });

  const nameInput = useRef();
  const { name, nickname } = inputs; //비구조화 할당으로 추출하기

  const onChange = (e) => {
    const { name, value } = e.target; //비구조화 할당으로 추출하기
    setInputs({
      ...inputs, //spread문법으로 기존 상태 복사하기
      [name]: value, //새로운 상태 설정
    });
  };

  const onReset = () => {
    setInputs({
      name: "",
      nickname: "",
    });
    nameInput.current.focus(); //current로 DOM 선택, onReset시 focus가 이름으로 향함
  };

  return (
    <div>
      <input
        name="name"
        type="text"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput}
      />
      <input
        name="nickname"
        type="text"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <p>값 : </p>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

 

- spread문법 => 기존의 것을 건들이지 않고, 새로운 객체를 만드는 것

- 객체의 상태를 없데이트할때 , 기존의 상태를 복사(spread문법사용)하고 특정갑을 업데이트하고 새로운 상태를 만든다-> 불변성을 지키는 것 (필요 렌더링만 하기, component 업데이트 성능을 최적화)

 

 

+) useRef로 특정 DOM 선택하기

- 함수형 : ref

- class형 : React.createRef()

 

useRef 객체를 만들고 해당객체의 current로 DOM 가르키기