리액트 댓글 달기

pull 하고 merge 하면 어떻게 바뀌어지는지 멘토님한테 물어보았다.

 

1. git pull 을 해줘서 로컬의 main 을 최신상태로 만들어줬다.

2. 로컬 main 의 브랜치인 jihyun 을 같이 업데이트 해주려면 git merge main 을 쳐야 한다.

3. 둘 다 최신상태로 바꿔주었다.

 

 

 

 

 

function App(){
	const [toDo, setToDo] = useState("");
    const [toDos, setToDos] = useState([]);
    const onChange = (event) => setToDo(event.target.value);
    const onSubmit = (event) => {
    	event.preventDefault();
        if(toDo === ""){
        	return;
        }
        setToDo("");
        setToDo(currentArray => [])
};

console.log(toDos);
return (
	<div>

 

 

 

 

---

import { useState } from 'react';

function Pratice() {
  const [toDo, setToDo] = useState('');
  const [toDos, setToDos] = useState([]);
  const onChange = event => setToDo(event.target.value);
  const onSubmit = event => {
    event.preventDefault();
    if (toDo === '') {
      return; // return 을 만나면 종료한다
    }
    setToDo('');
    setToDos(currentArray => [toDo, ...currentArray]);
    // react 는 함수의 첫번째 argument 로 현재 state 로 보낸다.

    /* 로직 설명
    1. 처음에 currentArray === [] 이다.
    2. toDo 는 input 을 통해 작성된 값 'Hello'
    3. ['Hello']
    4. 그 다음 currentArray === ['Hello']
    5. toDo 에 'bye' 작성
    6. ['bye', 'Hello']
    7. 결론 : setToDos(['Hello']=>['bye', 'Hello'])
    */
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="Write your to do..."
        />
        <button>Add To Do</button>
      </form>

      <ul>
        {toDos.map((item, index) => (
          <li key={index}>{item}</li>
          /* 같은 component 의 list 를 render 할 때 key 라는 prop 을 넣어줘야 한다.
          react 는 기본적으로 list 에 있는 모든 item 들을 인식하기 때문
           */
        ))}
      </ul>
    </div>
  );
}

// map 은 array 에 있는 item 을 내가 원하는 무엇이든지 바꿔주는 역할을 한다.
// ['there', 'you'].map(()=> ":)" )

export default Pratice;