[48] 이미지 편집 기능 구현

[dev-allenk]

구현사항

• 로직을 별도 파일로 분리하는 구조로 변경
• 글작성/수정 중 이미지 업로드 시 '사진편집' 기능 추가
  • 회전, 크롭 가능. 항상 1:1 비율의 사진만 업로드

참고사항

로직 구조 변경(컴포넌트별 관심사 분리)

• presentational 컴포넌트 : 오직 view와 관련된 부분만 담당하는 컴포넌트. 실행할 함수, 나타낼 데이터를 props로 받아서 어떠한 가공도 하지 않고 렌더링만 해요. 스타일링에만 집중하는 컴포넌트.
• 컨테이너 컴포넌트 : page 컴포넌트 하위에, presentational 컴포넌트 상위에 렌더링되는 컴포넌트. 컨테이너 하위에는 다른 컨테이너 컴포넌트가 존재할 수도 있어요. presentational 컴포넌트나 컨테이너 컴포넌트를 렌더링하고, 핸들러 함수를 정의하는 역할. 어떤 이벤트에 어떤 동작이 실행되는지, 어떤 state를 어떤 컴포넌트가 사용하는지만 표현
• page 컴포넌트 : 주요 state 관리, actions.js를 import, updater function(setState)과 actions객체를 하위 컴포넌트로 전달하는 역할. 하위 컴포넌트에 전달되는 prop이 state, setState, actions객체 3개밖에 없으므로 return부를 간결하게 표현할 수 있게 돼요.
• 각 컨테이너 컴포넌트 별 로직 : 컴포넌트명+Logic.js 파일에 해당 컴포넌트에서 사용하는 로직함수를 정의.
• actions.js : 각 로직을 import해서 1개의 객체로 export하는 파일.

  변경 컨셉, 중점을 둔 포인트

• 선언적인 코드를 유지하려고 노력했어요. 리액트 내부의 핸들러 함수나, 핸들러 함수가 호출하는 함수들은 가능하면 선언적으로 작성해서 맥락을 파악하기 쉽도록 작성했어요.
• context를 사용하지 않으면서 props의 개수를 줄이려고 했어요. 덤으로 prop drilling도 줄이려고 했어요.
• 수정할 곳을 알기 쉽도록 하는데에 신경썼어요. 이를 위해서 컴포넌트별 관심사를 분리하고, 로직을 분리했어요.

  변경 이유

  • 리액트로 코드를 작성하다보니 자유도가 너무 높아서 혼란스러웠어요.
  • 유지보수하기 쉬운 코드를 작성하려면 일관성 있는 코딩 스타일이 필요하다고 생각해서 이것저것 실험해보다가 지금 스타일로 변경했어요.

• 지금은 useState만 사용했지만 나중에 몇군데는 useReducer로 수정할 예정이에요.

해결된 이슈 번호

• resolved #100