2020.07.09(목) Sprint 8. React

Park, Jinyong·2020년 7월 9일
0

Today I Learned

React 스프린트의 과제인 Recast.ly를 진행했다.

enclosing tag 없이 여러 개의 태그 넘기는 방법

배열을 넣을 수 있으므로, map 또한 사용할 수 있다.

const App = () => {
  return (
    [
      <div>Hello</div>
      <div>World</dov>
    ]
  );
}
const App = () => {
  return (
    <>
      <div>Hello</div>
      <div>World</dov>
    </>
  );
}

태그가 너무 길어질 때 분리하는 방법

class Say extends Component {
  render() {
    const attr = {
      firstName: 'Jinyong',
      lastName: 'Park',
    }
    return <Hello {...attr} /> // <Hello firstName="Jinyong" lastName="Park" />
  }
}

defaultProps

default parameter처럼 props가 지정되지 않았을 시 default 값을 정할 수 있다.

// Comp: Component 이름
Comp.defaultProps = {
  // ... default props
}

오늘은 페어와 함께 recast.ly 과제에 들어갔다. 과제를 해결할 땐 테스트 케이스를 제일 먼저 보는 것이 꿀팁이다. 중학교 수준의 영어 실력...이라면 읽을 수 있다. 테스트 케이스는 코드를 대강 어떻게 구현해할 지 가르쳐주는 지표가 된다. REAMED.md에 자신이 배운 내용 꼭 정리하고... 테스트 케이스를 먼저 이해하길 바란다.

오늘은 오랜만에 네비게이터 역할을 해보았다. 나는 구현하고자 하는 코드를 머리로 생각하고 바로 작성하는 스타일이라 말로 표현하거나 글로 적는데 어려움을 겪고 있었다. 이번에 네비게이터로서 말로 설명하고 이를 페어가 이해하여 코드로 작성하길 원하는 부분에서 정말 답답함을 많이 느꼈다. 결국 어떤 걸 그냥 적어라 마라 그 정도 수준에서 정리되어 버리니까, 네비게이터로서 잘 해낸 것 같지 않다. 진도는 느려질지라도... 앞으로 네비게이터로서 역할을 충실히 하기 위해 경험을 쌓아보아야겠다.

0개의 댓글