CODE_PLAN

onchange에 적용했을시에는 

state의 배치업데이트로 하나씩 늦는다는것 

개념 알아두기! 

cf) useEffect안에 if문을 넣으면 하나씩 늦지않고 바로 반영됩니다.

VScode를 사용하다 보면 가끔 주석 단축키 ctrl + / 가 안될 때가 있습니다. 이 것은 한국어입력기가 [ 한국어 한컴 입력기 ]로 설정되어 있어서 입니다.

해결법

ctrl + shift 를 누르면됩니다.

ctrl 키를 누른 상태에서 shift 를 누른 후 shift 만 떼야합니다. 위와 같은창에서 ctrl+shift 를 눌러가며  [ 한국어 Microsoft 입력기 ] 를 선택합니다. 

또는, 그냥 vscode 창에서 ctrl + shift 를 누르면 됩니다.

불변성이란? 값은 변하지 않는것을 뜻합니다.

즉, 불변성이 없다는 값은 변한다 뜻 (State) 

객체와 배열 같은것은 원시 데이터가 아님으로 불변성이 없습니다.

따라서, 리액트에서 불변성을 지켜주기 위해서

{...obj} 와 같은 스프레드 문법이나 map, filter 같은것으로

불변성을 지켜줍니다~

객체는 기본적으로 주소를 바라봄

랜더링 - 화면 하나 바뀔때마다 바로바로 바뀌는것

화면에 랜더링 되는 조건 

(state가 변해야함) 

state가 바뀌면 랜더링하고

state가 안바뀌면 랜더링하지 않음

re redenering - 화면을 다시 그려줌 

map, filter, {...obj} 를 사용해서 새로운 객체를 만들어줌 

사용하는 이유

큰 프로젝트는 컴포넌트가 1000개 이렇게 되는데 거기서 공통적으로 쓰이는것을 다 똑같이 적어서 쓰면 매우 비효율적이라서 공통적인것을 따로 빼서씀

//GlobalStyle.jsx
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
  }
`;

export default GlobalStyle;

위와 같이 파일을 만들어놓고 

App.js 에서는 글로벌 컴포넌트를 가져다 이렇게 쓴다

//App.js
import GlobalStyle from "./GlobalStyle";
import Test from "./Test";

function App() {
	const title = 'exam';
	const contents = 'exam2';
  return (
    <>
      <GlobalStyle />
      <Test title={title} contents={contents} />
    </>
  );
}

export default App;

우선 위의 기능을 사용하기 위해서 확장자에서 간단하게 es7를 검색해서

ES7 React/Redux/GraphQL/React-Native snippets

라는것을 설치해준다음 적용시켜주면 바로 컴포넌트들에 적용되어집니다. 

효과> 시간절약 ㅎㅎ

중괄호 {...}를 이용해 객체를 선언하는 것을 객체 리터럴(object literal) 이라고 부릅니다. 객체를 선언할 땐 주로 이 방법을 사용합니다.

리터럴과 프로퍼티

중괄호 {...} 안에는 ‘키: 값’ 쌍으로 구성된 프로퍼티가 들어갑니다.

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

참고>

https://ko.javascript.info/object#ref-911

https://school.programmers.co.kr/learn/courses/30/lessons/181940

위 해결법처럼 repeat()을 사용한것과 같이
결과적으로 answer+= 로 밑에 출력값처럼 글자를 붙여서 출력할 수 있다