공부자료

애플코딩
https://www.youtube.com/watch?v=bq2SjODrhJQ&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&index=7

https://reactjs-kr.firebaseapp.com/tutorial/tutorial.html

공부한 소스

import React, { useState } from "react";

import "./App.css";

function App() {
  console.log("랜더링된다");

  let [state, setState] = useState(["맑음", "흐림", "눈"]);
  let [thumb, setThumb] = useState(0);

  console.log(`state[0] 값 : ${state[0]}`);
  // function 소나기로바껴라() {
  //   setState(
  //     state.map((v, i, arr) =>
  //       v === "맑음" ? (arr[i] = "소나기") : (arr[i] = v)
  //     )
  //   );
  // }
  function 소나기로바껴라() {
    let newState = state.slice();
    newState[0] = "소나기";
    setState(newState);
  }
  function 맑음으로바껴라() {
    let newState = state.slice();
    newState[0] = "맑음";
    setState(newState);
  }
  function 오름차순되라() {
    let newState = [...state].sort();
    setState(newState);
  }

  return (
    <div className="App">
      <header className="black-nav">
        <div>오늘의 날씨</div>
        {state[0] === "소나기" ? (
          <button onClick={() => 맑음으로바껴라()}>맑음으로 바껴라</button>
        ) : (
          <button onClick={() => 소나기로바껴라()}>소나기로 바껴라</button>
        )}
        <button onClick={() => 오름차순되라()}>오름차순 정렬</button>
      </header>
      <div className="list">
        <h3>
          {state[0]} <span onClick={() => setThumb(++thumb)}>👏</span> {thumb}
        </h3>
        <p>오늘 발행</p>
        <hr />
      </div>
      <div className="list">
        <h3>{state[1]}</h3>
        <p>내일 발행</p>
        <hr />
      </div>
      <div className="list">
        <h3>{state[2]}</h3>
        <p>모레 발행</p>
        <hr />
      </div>
      <Modal state={state}></Modal>
    </div>
  );
}

//컴포넌트에는 파라미터를 통해 props가 전달된다.
function Modal(param) {
  console.log(`props : ${JSON.stringify(param)}`);
  return (
    <div className="modal">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용 : {param.state[0]}</p>
    </div>
  );
}

export default App;

알게된점, 까먹은것

배열 객체시 deepCopy

react는 state가 배열이나 객체일때 주의해야한다. 불변성을 유지해야 하고, 만약에 값 변경후 페이지re-rendering을 원할때는 배열이나 객체 같은 경우 새 주소값을 줘야한다. 즉 깊은 복사를 해야 하는데, 위 소스처럼 .slice() 로 하는 방법이 있고, 또 오름차순되라() 함수 처럼 [...array]
요렇게 spread 연산자로 정의해주면 deepCopy가 되긴한다.

함수 이벤트에 바인딩시 callBack func으로

항상 헷갈리는게 onClick ={ () => fucniton myFunc()} 요렇게 함수 바인딩 할땐 항상 콜백 형식으로 들어가야 한다.

function 형식으로 component 사용시 props는 parameter로 들어온다.

위에 modal funciton 처럼 파라미터로 props가 들어온다. 즉 modal(param)을 적든
modal(바보)를 적든 param에 적은 characters 를 객체명으로 하고 사용하고픈 데이터에 접근 해주면 된다. 늘 props만 습관적으로 쓰다보니, param 개념이 아니라 props라는 특정 api명시 param 이 있는 줄 착각했음. 걍 단순 함수고 걍 단순 파라미터임. 근데 react라서 함수가 JSX의 컴포넌트 형식으로 바꿔주는거임.

배열 데이터 변경할 떈 Map
삭제 할땐 filter
추가할땐 concat 사용하면 좋음. 정 기억안나면 .
forEach(value, index, array) 써도 되는데 비추
forEach는 새로운 배열을 만들어 내지 않는다.