리액트 1주차 회고

한 것

1. js에서 jsx 를 사용해 카운터 컴포넌트를 만들었습니다.
2. 변수에 값을 재할당하지 않고 카운터 컴포넌트를 만들었습니다.
3. 계산기 컴포넌트를 만들었습니다.

느낀것

1. 사실 리액트를 사용해 컴포넌트를 만들면서 jsx 가 내부적으로 어떻게 동작하여 html과 같이 작동하여 화면에 그려지는지에 대해서는 궁금해하지 않았습니다.. 그냥 당연하게 생각하고 사용하였는데 이번 기회를 통해 jsx가 어떻게해서 화면에 그려지는건지 알게되어 너무 좋습니다. 앞으로 무엇인가를 사용할때 코드가 마법을 부린다 생각하지 않고 코드의 동작 원리를 알고 사용해야겠다는 생각이 들었습니다.

2. 처음에는 아래의 코드에만 빠져서 다른방법을 생각하지 못하고 count를 증가시켜줘야하는데 어떻게 count에 값을 재할당하지 않고 증가시키지?... 이게 말이 되나라고 생각하며 변수에 값을 재할당하지 않고 해결하는 방법을 떠올리지 못하고있었습니다...

   function handleClick() {
     count = count + 1;
     render();
   }

   그런데 슬랙에서 다른 수강생분들이 재귀함수에 대해 언급해주셔서 재귀함수를 이용하니 문제가 해결되었습니다.

   다른 방법이 있을꺼라 생각하지 못하고 한 부분에만 빠져있었던 저를 반성합니다...!

   앞으로 문제를 해결할때 한가지의 방법만 생각하지말고 여러가지 경우의 수를 생각하며 해결해야겠다는 생각이 들었습니다.

3. 계산기 과제를 시작할때 단계적으로 생각하지않고 계산기 하나를 통으로보고 순서없이 만들다보니 코드도 순서없이 정신없게 작성되고 불필요한 형변환과 예외처리 코드가 정말 많이 들어갔습니다. 그래서 코드리뷰를 받을때도 형변환, 예외처리 에 대한 얘기가 제일 많았던거같습니다. 그리고 제가 부정문을 통해 예외처리를 많이 하고있다는 사실도 알게되었습니다. 그리고 이번에 계산기 기능을 구현하면서 너무 쓸데없이 복잡하게 기능을 구현하려 애썼다는 것을 과제풀이 영상과 코드리뷰를 통해 알게되었습니다.. 앞으로는 최대한 간단하게 문제를 해결해야겠다는 생각이 정말 많이 들었습니다.

   아.. 그리고 제일 힘들었던 부분에 대해 까먹을뻔했네요.. if문을 사용하지 않고 해결하는 부분에서 정말 생각도 많이하고 구글링도 많이하고 여러가지 시도를 해보았던거 같습니다. 대체 어떻게 if문을 사용하지 않고 분기를 해줄 수 있을까에 대해 정말 많은 고민을 해보았던거 같습니다. 고통주도개발 을 사알짝 맛본거같네요 ㅎㅎㅎㅎㅎ...

   이번 기회로 제가 새로 알게된 것들은 아래와 같습니다.

   1. 부정문으로 예외처리하는것은 읽는 사람에게 두번 고민하게 만든다
   2. 여러 역할을 동시에 처리하려고 할때 예외처리가 추가된다. 이럴땐 그리기 와 계산하기 를 분리해보자
   3. 예외처리를 사용해 분기를 하기보다는 값들이 있다면 연산을하고 없다면 기존 값을 사용하는 방법을 적용해보자
   4. 형변환이 필요하게된 원인을 파악하고 애초에 형변환이 필요없도록 순수한 값을 내보내자
   5. 무엇인가를 만들때는 가능한 작은 기능 단위로 쪼개고 하나 하나 순차적으로 해결한다
   6. 여러가지의 경우를 예외처리해줄때는 if문 보다는 Lookup table pattern 을 사용하자, 그렇게하면 코드가 깨끗해지고 가독성이 좋아지며 모든 조건이 처리될 때까지 기다릴 필요가 없어진다.
   7. 함수에 너무 많은 파라미터들이 넘어올때는 객체로 묶어주자 → RORO패턴
   8. 변수 네이밍은 줄여쓰지 않는다.
   9. 문제를 최대한 간단하게 해결해보자

   이번 과제를 통해 새로 알게된점이 많아 정말 좋습니다. 앞으로 코드를 작성하면서 이번 과제에서 알게된 부분을 잘 활용하도록 하겠습니다. 그리고... 정말 코드리뷰를 너무너무 해보고싶었는데 실제로 해보니 생각했던것보다 훨씬 더 좋은거같습니다. 누군가에게 코드에 대한 리뷰와 피드포워드를 받고 점점 좋은방향으로 가고있는 저를 보는 즐거움을 이제야 알았네요.. 정말 너무너무 좋습니다...!!!!!