[React] 기본 세팅부터, 코드 스니펫

가장 돈 벌기 좋은 라이브러리 (?) 리액트 공부시작.

 

근데 집와서 해보니 rfc, rcc가 잘 안먹어서 코드 스니펫을 우선 깔아주자. 

[React snippets] 컴포넌트 종류별 단축키

 

 

리액트를 시작하기

 

npx create-react-app myapp --skip-git

시작했으면 

cd로 그위치에 가준다 (cd myapp)

npm start를 하면 시작! 

 

실습을 하던 중 물음표 사용법에 대해 자세히 알아보기로 했다.

[Javascript] Javascript에서 ?(물음표) 사용법

어쩐지 상태변경함수에 쓰더니, 

1. 삼항연산자 (? 사용)

if else 대체 연산자

 

2. 선택적 연결 (? 사용)

"속성이 undefiend이거나 null일 수 있다. 참조값이 undefiend나 null이면 error를 발생시키는 대신 undefiend를 return한다."

?.는 앞의 속성에 접근하기 전에 null이나 undefiend가 아닌지 검증한 후, 다음 속성에 접근해 error를 막는다고 한다.

 

3. 무효화 합체 (?? 사용)

 

?? 는 왼쪽 값이 null 혹은 undefiend 이면 오른쪽 피연산자 값을 출력한다. 반대의 경우는 왼쪽 피연산자의 값을 출력

예시를 보면 이해가 더 쉽다. 

 

|| 의 경우 왼쪽 항이 truthy한지 확인하고,

?? 의 경우는 왼쪽 항이 정의된(defined) 값인지 확인한다는 차이가 있으니, 주의하는 게 좋겠다.

 

 

우선 현재까지 공부한 코드 첨부 app.js

// import logo from './logo.svg';
import { useState } from "react";
import "./App.css";
// import BtnToNaver from "./components/BtnToNaver";
// import ImgComponent from "./components/ImgComponent";
// import MainHeader from "./components/MainHeader";

function App() {
  // function printConsole() {
  //   console.log("출력하기!");
  // }
  // const helloStr = "Hello, STR!"
  // function MainHeader() {
  //   return <h2>Hello, Component world!</h2>;
  //   };
//   const [teacher, setTeacher] = useState("쌤");
//   const [strState, setStrState] = useState("init");
// // 함수로 상태 변경함수 값 설정
//   function customSetTeacher(){
//     setTeacher("SSAM!");}
let [condition, setCondition] = useState(true);
 
  return (
    <div className="App">
      <button onClick={()=> setCondition(!condition)}>컨디션 변경</button><br/>
      <span style={{fontSize: "100px"}}>{condition ? "🚀" : "⛵"}</span>
      {/* useState */}
      {/* <button onClick={()=> setTeacher("ssam")}> 영어로!</button><br/>
      <span>{teacher}</span> */}
      {/* state 무한 */}
      {/* <button onClick={() => setStrState(strState + "+")}>반복!</button>
      <br />
      <span>{strState}</span> */}
  {/* <button onClick={customSetTeacher}>영어!</button>
  <span>{teacher}</span> */}
      {/* 컴포넌트 다루기 */}
      {/* <ImgComponent/>
      <BtnToNaver/> */}
      {/* <MainHeader /> */}
      {/* 이벤트 핸들러 */}
      {/* <div onClick={()=>{alert("클릭되었습니다!")}}>{helloStr}</div> */}
      {/* <div style={{ marginTop: "32px", backgroundColor: "skyblue" }}>blue</div> */}
      {/* <span onClick={printConsole}>클릭!</span> */}
      {/* <span onClick={()=>{
        let num = 10;
        num+=5;
        console.log(num);
      }}>Click!</span> */}
    </div>
  );
}

export default App;

컴포넌트 실습

import React from 'react'
import { useState } from 'react'

export default function Emoji() {
    const [count, setCount] = useState(0);
  return (
<>
    <button onClick={()=>{setCount(count+1)}}>{count<=10 ? "🚀": "⚛️"}</button><br/>
    <span>{count}</span>
</>  )
}

 

 

State 객체, 배열인 경우 

 

"만일 state가 객체,배열이라면 원시타입과 동일하게 state를 수정해주면 안된다.

수정해주어도 state는 그 내용이 변경된 배열을 그대로 참조하기 때문이다.

 

새로운 메모리주소를 참조하는게 아닌 기존의 메모리주소를 그대로 참조하고 있기 때문에

리액트는 state가 변경되었다 판단하지 못하고 나의 의도대로 컴포넌트를 리렌더링 하지 않는다."

react의 state가 객체(배열)라면..?(feat. 변수)

해결법은?

1. 새로운 객체(배열)데이터를 만들어준다. = 새로운 메모리공간에 데이터를 할당한다는 의미

function App() {
  let [state, setState] = useState({ teacher: "이효석" });
  console.log(state);
  return (
    <div className="App">
      <button
        onClick={() => {
          setState({ teacher: "tetz" });
          console.log(state);
        }}
      >
        영어로!
      </button>
      <br />
      <span>{state.teacher}</span>
    </div>
  );
}

2. setState() 함수를 사용해 새로 만들어준 배열을 입력해준다. = state가 새로운 메모리주소를 참조하게 해준다는 의미

"이 때 spread 문법을 사용하면 편리하게 새로운 객체(배열)을 만들어 할당이 가능!"

function App() {
  let [state, setState] = useState({ teacher: "이효석" });
  console.log(state);
  return (
    <div className="App">
      <button
        onClick={() => {
          state.teacher = "tetz";
          const copyObj = { ...state };
          setState(copyObj);
          console.log(state);
        }}
      >
        영어로!
      </button>
      <br />
      <span>{state.teacher}</span>
    </div>
  );
}

 

 

Spread  문법

 

[JAVASCRIPT] 알아두면 편리한 스프레드 spread 문법