✅ 오늘 한 일

---

• 생활 코딩! 리액트 프로그래밍 읽기
• Project Etude

🎮 Project Etude

---

프로토타이핑

여기까지 예전에 디자인 해놨던거

프로토타이핑을 위한 디자인

대충 만들어봤다

디자인이 투박하니까 얼불춤이랑 느낌이 너무 비슷한 것 같음
그래서 이전에 디자인할 때 세련된 디자인이나 아기자기한 느낌을 시도해봤던 거긴 한데
일단 나중에. 게임 로직 만들어보는게 더 중요.

📖 생활 코딩! 리액트 프로그래밍

---

이벤트

function Nav(props) {
  const lis = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(
      <li key={t.id}>
        <a
          id={t.id} // id를 지정해주고
          href={"/read/" + t.id}
          onClick={(event) => {
            event.preventDefault(); // 기본 동작을 방지한다
            props.onChangeMode(event.target.id); // a태그 id를 가져온다
          }}
        >

여기 있는 <a> 태그는 순수한 HTML과 똑같지 않은 유사 HTML이기 때문에 Header 함수 안에 코드를 작성하면 리액트 개발 환경이 HTML로 변환해준다.

onClick 이벤트에 콜백 함수로 들어간 함수가 호출될 때 리액트는 event 객체를 첫 번째 파라미터로 주입함. 이 이벤트 객체는 이벤트 상황을 제어할 수 있는 여러 가지 정보와 기능이 있음.
event.preventDefault(); 이게 <a> 태그가 동작하는 기본 동작을 방지해줌.

function (event) 이걸 화살표 함수로 (event)=> 이렇게 축약 가능.
변수가 하나면 괄호도 생략 가능하긴 한데 Prettier가 괄호 넣어버린다.

state

리액트 컴포넌트
입력: prop
다시 실행: state
출력: (UI를) return

useState를 출력해보면 인덱스 0에는 상태값 데이터, 인덱스 1에는 상태값 변경할 때 쓰는 함수가 들어있다.

const [mode, setMode] = useState("WELCOME");

그래서 이렇게 선언해놓고 사용한다. ('WELCOME'은 초깃값)

<a
  id={t.id}
  href={"/read/" + t.id}
  onClick={(event) => {
	event.preventDefault();
	props.onChangeMode(event.target.id);
  }}
>

html 태그 안에 넣은 id={t.id}는 문자열이 된다.

props.onChangeMode(Number(event.target.id));

그래서 숫자로 사용하려면 숫자로 형변환 해줘야 한다.