inno 22

22 Aug 2022

Sparta coding

Innovation Camp

w4 day22

memo에서 TIL을 따로 뽑아서 쓸 것

• 한줄 / 한줄
• 매일 자기 직전

---

학습자료 router 부분?
import work / param id consoel찍기오류

에로우 함수를 넣어서

• 작동이 끝난다음에 실행해라

---

LifeCoding 9 Update -2

update 버튼은 상세page에서만보이고
welcome page에서는 안보이는게 세련됨 how?

• 새로운 변수에 넣고 초기값을 null;

  let contextControl = null;
  

• update부분을 잘라놓고

  <li>
    <a href="/update">Update</a>
  </li>
  

• mode가 “READ” 일때 표시되는 부분 아래에 추가

  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>;
      contextControl = (
      <li><a href="/update">Update</a></li> //이부분
      );
  
  마지막으로
  
  "/update" 부분에 page id값을추가
  
  {'/update/'+id}
  

• Update는 Create와 같은 형식을 써도됨
• form을그대로 복사해서 쓰고
• 기존에 쓴내용을 textarea에 표시하기위해

• props로 정보를 받아와서 내부에 표시

      <p><input type="text" name="title" placeholder="title" value={props.title}/></p>
      <p><textarea name="body" placeholder="body" value={props.body}></textarea></p>
  

• but, props는 내려준 정보를 읽기만 할 수 있는 상태 (수정 불가)
  그렇다면.. 이 prop을 state로 승격시켜라…

  const [title, setTitle] = useState(props.title);
  const [body, setBody] = useState(props.body);
  
  value값의 title,body에 props삭제
  <p><input type="text" name="title" placeholder="title" value={title}/></p>
  <p><textarea name="body" placeholder="body" value={body}></textarea></p>
  

• state로 승격시키긴했지만 textarea에서는
  아직 수정권한이없다?
• user의 입력값이 뭔지추적 console.log(event로 받고 이event가있는
  tartget 의 value)
• console.log(event.target.value);로 확인가능
• setTitle(event.target.value); 로 확인한내용 수정권한 부여

자 이제 user가 입력하는 내용을 전달하고
표시하는건 되는데

• update를 submit하면 어디로? > onUpdate로 간다
• 가서 console.log(title, body)확인해보면 > 잘들어옴

수정한 내용을 넣으려면

• const updatedTopic = { id: id, title: title, body: body };

topics는 배열이니까

• const newTopics = […topics]; 복제
  근데 기존의 topics에서 id가 읽치하는 것을 찾아야 함
• for문 을 돌려서 index별로 확인하고
  if 일치할 경우 updatedTopic으로 교체해버려
  더이상 실행할 게 없으니 break로 종료시키고
• setTopics에 updatedTopic을 담은 newTopics를 넣고

• 바뀐 페이지를 보여주기위해
  setMode(‘READ’) read모드로 바꿔줌

  <Update
  title={title}
  body={body}
  onUpdate={function (title, body) {
  console.log(title, body);
  const newTopics = [...topics];
  const updatedTopic = { id: id, title: title, body: body };
  for (let i = 0; i < newTopics.length; i++) {
  if (newTopics[i].id === id) {
      newTopics[i] = updatedTopic;
      break;
  }
  }
  setTopics(newTopics);
  setMode("READ");
  }}
  ></Update>
  

지금 구현한 내용은 Update를 통해서