inno 20

20 Aug 2022

Sparta coding

Innovation Camp

w3 day20

세은a님

event log(dir) 확인

지현님 질문
title을 alert으로 출력 가능?

변수t에 담긴 배열로부터 출력 t.title
onClick으로 발생하는 event
인자 event는 들어가야하고
eventPreventDefualt > 기본동작 비활성화
event말고 지정했던 변수 t사용도 ㅇㅋ
t.id

LifeCoding 7 State

prop / state가 변경되면 새로운 return값으로 변경되고 UI를 바꿈

prop : compo를 사용하는 외부자를 위한 data
state : compo를 만드는 내부자를 위한 data

Application의 논리를 구성해보자

const mode 를 App안에 선언하고
let content 선언 / 초기값 설정
if mode가 WELCOME 일 때 <Article~ welcome>을 return
if mode가 READ일 때 <Article~ read>를 return
Article이 들어갈 위치에 변수{content} 삽입

논리는 다 만듦 / event가발생할때 적용되도록

mode = ‘WELCOME’

mode = ‘READ’

a tag를 onclick하면 mode의 값 바뀜 >
if문에 따라 Article의 내용이 변경 >
새로운 return값이 UI에 반영

하지만 지금은 page를 reload하지않음 이때 state를 사용해야 함

import {useState} from ‘react’;
useState라는 hook을 사용해야함
useState는 react에서 기본 제공하는함수
현재 mode는 지역변수

local var인 mode를 state(상태)로 upgrade

const _mode = useState("WELCOME")
const mode = _mode[0]
const setMode = _mode[1]


useState를 사용해서 ( )감싸주면
state를 만드는 것

이제 이 state가 return이 될텐데
console.log(_mode)
: useState는 배열을 return하고
index 0 = 상태의 값을 읽은data
index 1 = 상태값을 변경하는 함수

위 3code를 축약하면
const [mode, setMode] = useState("WELCOME")

setMode("WELCOME")
setMode("READ")

Q1 Nav에서 onClick event로 id값을 받아오게
했었는데 왜 지금은 mode변경이 반영됨?

id값으로 Nav의 내용을 가져오고 싶은데
(변수topics 에 가져올 내용이 저장되어있음)

const [id, setId] = useState(null) -useState로 state를 만들고 초기값은null

id state값은 언제바뀌나? Nav를 onClick했을때
Nav의 onChangeMode에다가

setId(_id)

topics의 값중에 찾는 id와 일치하는 원소의
title, body값을 세팅하자

반복문으로 id state와 일치하는 원소를 찾자

mode가 READ일때 작동해야하니 그 아래 작성

for문으로 topics의 길이만큼 돌리다가
if topics[i].id 값이 id state와 일치하면
title과 body를 return하자
- title,body를 선언했기때문에
  {title}, {body}로 불러오고

구동했더니 동작하지않음
console.log(topics[i].id, id)
Nav에서 id state값을 문자열로 받아옴

Nav의 event.target.id를 Number()로 변환

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}
          href={"/read/" + t.id}
          onClick={function (event) {
            event.preventDefault();
            props.onChangeMode(Number(event.target.id)); // (t.id) no p
          }}
        >
          {t.title}
        </a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );
}

function App() {
  const [mode, setMode] = useState("WELCOME");
  const [id, setId] = useState(null);

  const topics = [
    { id: 1, title: "html", body: "html is..." },
    { id: 2, title: "css", body: "css is..." },
    { id: 3, title: "javascript", body: "js is..." },
  ];

  let content = null;
  if (mode === "WELCOME") {
    content = <Article title="Welcome" body="Hello, React"></Article>;
  } else if (mode === "READ") {
    let title,
      body = null;
    for (let i = 0; i < topics.length; i++) {
      console.log(topics[i].id, id);
      if (topics[i].id === id) {
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title={title} body={body}></Article>;
  }

  return (
    <div>
      <Header
        title="WEB"
        onChangeMode={function () {
          setMode("WELCOME");
          // mode = "WELCOME"
        }}
      ></Header>
      <Nav
        topics={topics}
        onChangeMode={function (_id) {
          setMode("READ");
          setId(_id);
          // mode = "READ"
        }}
      ></Nav>
      {content}
    </div>
  );
}

Q2 애초에 event.target.id가 아니라
t.id 값으로 받아오면?

문제가 없음ㅇㅋ

compo를 다시 실행시키는 두가지data
props / state에대해 배웠다
어려운개념이라 이해가 안되면 계속 되짚어 볼 것

team repo Q2
Optional chaining? 어떤 때 사용?

done at Notion

LifeCoding 8 Create

create를 click하면 create page로..

근데 지금은 mode의 값을 바꿈 > page 변경 인 상태

create click > create mode > 입력가능한 UI

onclick 할 때 setMode(“CREATE”) 로 진입하게 설정
mod === “CREATE” 일 때
자식compo 구조 설정하기 es)input tag 넣기
but compo를 짜서 넣을예정

Create compo를 만들고

form tag로 구성

<input type="text" name="title" placeholder="title"/>
<textarea name="body" placeholder='body'></textarea>
<input type="submit" value="Create"></input>

각각 <p></p> tag로 감싸서 줄바꿈

Q3 form tag ?

HTML 입력 양식

text field에 text입력, checkbox / radio btn 등
입력후 제출하면 backend 서버에 양식을 전달

<Create>에서 onCreate를 했을때 어떤것을 실행하고싶다

functoin 삽입
create compo로 가서
submit을 했을때 form tag는 page를 reload 하는것을 확인
fortm tag에 onSubmit 함수 삽입, event parameter넣고
event.preventDefault() 넣으면 reload 막음

이제 event 함수 안에서
Create compo안의 name=title,body인 value를 얻어야함

const title = event.target.title.value
const body = event.target.body.value

이 form tag안의 event에서 일어나는 일이기때문에
event.target으로 그 값을 가져올수 있다
title, body의 value(입력값)를 추출해오자

이렇게 추출한 title,body를 create compo사용자에게 공급?

props를 통해서 공급할수 있잖아
Create compo 의 인자로 props 삽입
props.onCreate(title, body)
받은 정보를 topics 에 추가해서 Nav에 목록추가
topics의 정보가 변하려면 state로 승격

 const topics = useState([
    {id:1, title:'html', body:'html is...'},
    {id:2, title:'css', body:'css is...'},
    {id:3, title:'javascript', body:'js is...'}
  ])

use State( 기존topics )
topics를 useState로 감싸서 승격시킴

 const [topics, setTopics] = useState([
 ...
  ])
[topics, setTopics] 읽기, 쓰기의 interface 추가

이제 topics에 추가될 것 만들기

newTopic = {title:_title, body:_body}

그럼 id 값은?

별도로 관리하겠음
const [nextId, setNextId] = useState(4)
next id는 3까지 존재하므로 초기값4부터 시작

Q4 const[value, setValue] = useState(PRIMITIVE);
state(상태)를 만들 때 data가 Primitive(원시)type이면?

string,nunber,boolean등 : 하던대로

const[value, setValue] = useState(Object);
state를 만들 때 data가 Object(범객체)면?

object, array 등 : data를 복제해야함

newValue = {…value}
점3개value > value값을복제하고
오리지널은 그대로 두고 복제본 newValue를 변경
setValue(newValue) 이렇게 newValue를 넣으면
비로소 compo가 다시 실행됨

배열이면? […value] 대괄호

const [value,setValue]
setVlue(넣은value)가 오리지널과 같으면 가만있고
다르면 비로소 compo를 다시 rendering한다

여기까지 잘 추가되는데 보통 추가가된다면
잘 작동했는디 해당 page를 보여줌. 자 해보자

<Create> 안에서 setMode(‘READ’) read상태로 바꾸면 바로 넘어감
setId(nextId) id를 next로 바꾸고
setNextId(nextId+1) 다음 추가를 위해서 +1해놓음

Team repo Q2

optianal chaining

redux 체크하고 나오면 팀원에게 알려주기
생활코딩 끝나고 학습자료 다시보기