[TIL] 23.04.17.

Today I Learned

오늘의 학습 내용

• 리액트 숙련 강의 수강
• 리액트 TODO 프로젝트 리팩토링 1

새로운 배움

• Css in JS
• 리액트를 리액트답게 사용하기 실제돔 접근 vs 가상돔 접근

문제 상황과 시도, 해결

• 리액트 숙련 주차 첫시간에 CSS in JS에 대해 배웠다. CSS를 javascript 코드로 작성하는 것을 도와주는 라이브러리들로 대표적인 styledComponent의 기본적인 사용법도 익혔다.
• 기술매니저님 코드 리뷰를 통해 리액트 프로젝트 코드를 리뷰 받았다.
  말씀해주신 수정사항들을 코드에 반영하였다. 처음 작성했을때 보다 코드가 깔끔해졌다. 처음엔 state를 많이 관리하고 있었는데 중복되는 state들을 줄여보는게 좋을것 같다고 말씀해주셔서 시도하고있었다.
  객체를 담은 배열자체를 state로 선언하였는데 어떻게 배열의 객체의 일부값만 변경할지 고민이었다.
  이전 코드에선 그래서 객체의 값들을 꺼내와서 하나하나 state로 관리했었다.
  고민을 하다가 ES6에 추가된 스프레드문법이 생각났다. 객체 안의 값들을 스프레드 풀어서 값을 수정해주고 다시 객체로 만든다음 배열에 넣는 형태로 구현했다.
  또 리뷰해주신 내용중에 실제돔에 접근하지말고 가상돔에 접근하는 형태로 코드를 작성해보라고 하셨다. 그말을 듣고 보니 코드를 작성할때부터 찝찝무리 했었던 인풋태그 아이디가 생각났다! 인풋태그가 비어있으면 내용을 입력하라고 안내를 띄워주는 부분에서 document~.id로 접근하고 있었는데 어차피 각 인풋에 입력되는 값들은 state로 관리되고 있는 객체 안의 값이므로 굳이 도큐먼트로 접근할 필요가 없었다. useState를 선언할때 앞의 값은 게터, 뒤의 값은 세터라고 내입으로 말해놓고 게터의 역할을 완전히 잊고 있었다.

느낀점

JSX에서 인라인 혹은 객체로 CSS코드를 작성하면서 찝찝하게 불편했었다. 기존의 CSS 문법과 다른 부분들도 있었고..역시나 사람들은 생각하는게 비슷한지 해결방법이 있었다. 이거 이상한데? 이거 다른 편한방법없나? 생각하는 습관을 가져야겟다고 생각했다.

관련 작성글

[리액트] CSS in JS, Styled Components 란
깃허브 바로가기