[ 엘리스 SW 엔지니어 트랙 ] 51일차(11주차: React II - CSS in JS, SPA, API연동)

📍 51일차 1.4.화. 실시간 강의

오늘은 React의 form태그, props, 컴포넌트 계층으로 분리, 역방향 state처리에 대해서 배웠다. 50일차 내용에 크게 벗어나지 않아서 난이도가 있지는 않았다.

❏ 이론

1. 부모에서 자식으로 오는 변경된 값은 props 를 사용하고, 자식에서 부모로 가는 값의 변경은 부모에서 내려오는 함수로 값을 전달한다.
2. form 에서 onSubmit 으로 제출 된 값 가져올때는 event.target.name.value 사용하기

<form onSubmit={submitHandler}>
  <input type="text" name="title" placeholder="title" />
  <textarea name="body" placeholder="body" />
  <input type="submit" value="제출" />
</form>;

function submitHandler(event) {
    event.preventDefault();
        const { title, body } = event.target;
    console.log(title.value, body.value);
}

3. update 시 props 로 받아온 내용은 수정이 정상적으로 되지 않기때문에 props 로 받아온 내용을 state 로 선언하고 setState로 바뀌는 값을 적용한다.
4. 서버를 변경하는 명령으로 a href 태그를 사용하지 않고 form 태그를 사용한다.

❏ 실습

1. UI를 컴포넌트 계층으로 분리하기: 한 가지의 기능만 수행하는 컴포넌트로 만들기.

2. 역방향으로 state를 처리하려면 state를 한 단계 위로 올리는 방법이나 상위 컴포넌트에서 state를 적용하는 함수를 만들기
3. 스타트업에 지원할 때는 지원회사가 시리즈 투자를 받은 이력이 있는지 확인해보고 job description이 내가 지원하는 분야와 맞는지 확인하기