2020.07.10(금) Sprint 8. React

Today I Learned

Recast.ly의 남은 bare minimum requirements를 해결했다.

lifting state up

상위 컴포넌트의 state는 하위 컴포넌트에서 수정할 수 없다. 하위 컴포넌트에 props로 내려주어야 하는데 props는 read-only이기 때문이다. 하지만 이 기법을 사용하면 수정할 수 있다.

상위 컴포넌트에 state를 수정할 수 있는 함수를 생성한다. 그리고 이를 하위 컴포넌트의 props로 넘긴다.

constructor(props) {
  super(props);
  this.handleChange = this.handleChange.bind(this);
}

// 상위 컴포넌트
handleChange(item) {
  this.setState({ item });
}

render() {
  return <Comp handleChange={this.handleChange} />;
}

하위 컴포넌트에서는 받은 state 변경 props 함수를 이벤트 함수 안에서 실행하도록 한다.

constructor() {
  this.onClick = this.onClick.bind(this);
}

onClick(event) {
  this.props.handleChange(value);
}

render() {
  return <input type="button" onClick={this.onClick} />
}

이로서 하위 컴포넌트에서 상위 컴포넌트의 state를 변경할 수 있다.

---

이번 스프린트는 꽤 힘들었다. 공식 문서에서 코드를 분석하고 이를 통해 요구하는 바를 직접 구현해야 하니 생각보다 까다로웠다. 이해가 안 가는 테스트 케이스도 있었고, 원래 같으면 README에 우리가 작성할 내용을 미리 정리하고 이를 지표 삼아 구현하는 방향으로 진행하는데, 무엇을 해야할 지부터 막막하니까 참 답답했다. 프리 때 공부 좀 했다고 예습을 조금 소홀히 하긴 했는데, 제대로 걸려들었다. 그렇다고 이해가 안가는 부분은 없었지만... 도중에 this 문제로 머리 아파지고, 철자 하나 틀려서 찾느라 고생하고, api 키가 갑자기 안 먹혀서 400 request 에러만 응답오고... 급하게 하다보니 정말 여러모로 피곤한 스프린트였다.

페어 분께서 페어 리뷰로 내가 평소 느끼던 내 문제점을 정확하게 지적해주셨다. (진심을 담은 페어 리뷰 감사합니다.) 나는 주로 드라이버를 맡아 주도적으로 코드를 작성하면서 동시에 페어에게 어려운 점은 없는지 물어가며 계속 소통하는 방식을 취해왔다. 그런데 이번 스프린트는 시간이 상당히 부족해서 bare minimum만 통과하는 데도 겨우 해냈다. 시간 내에 완성하기 위해 코드를 작성하는데만 급하다보니 페어와의 소통을 제대로 해내지 못했다. 예습을 소홀히 해서 페어에게 설명을 하는데도 정확하게 하지 못했다. 이는 확실히 내가 추구하는 방향에서 틀어졌다.

만약 실제 업무에서 프로젝트를 하는거라면 내 방법이 정답이다. 일단 정해놓은 requirements를 완성하는 것이 제 0 순위이다. 따라오는 것? 말할 것도 없다. 하지만 우린 교육을 받는 입장이다. 상대 페어를 존중해야 한다. 실력이 더 뛰어난 사람은 다른 사람을 이끌어주어야 하고, 실력이 부족한 사람이라면 따라가기 위해 남들보다 노력해야 한다. 페어 둘 모두 프로그래밍 실력과 소통 능력 두 가지 토끼를 잡으려면 서로 협력해야 한다. 시간이 충분하다면 두 마리 모두 챙길 수 있을 것이다. 하지만 개발자에겐 정말로 시간이 금이다. 한정된 시간 안에 어떤 토끼를 잡아야 할지는... 고민해봐야겠다.