[React] React 공식 홈페이지에서 소개하는 React 식으로 디자인하기

마지막 글이 2023년 10월인것이 실화입니까? ㅎㅎㅎㅎㅎ

 

저는 아직 같은 회사에서 프론트 개발자로 일하고 있습니다. Ops에 관한 열망은 개인프로젝트로 채우고 있지요.

개인프로젝트 진행상황은 linked in에 간간히 소개하고 있는데 블로그에도 신경을 좀 써야겠습니다

https://kr.linkedin.com/in/seabyeok-chu-1217b21b6?trk=public_post_feed-actor-image

 

최근 쉐어하우스 오픈(..두둥!!)을 준비 + 회사에서 가족같은 사람을 만나 고생하는 바람에 어찌저찌 4개월만에 글을 씁니다 ㅎㅎ

 

 

 

 

 

jQuery로 만들어진 코드를 Refactoring해봅시다

최근 jQuery로 만들어진 코드를 React로 Refactoring하는 임무를 맡게 되었어요.

 

Refactoring을 하게된게 2년..3년만이라 최신 트렌드도 알아보고 공부도 할겸 아주 오랜만에 React공식홈페이지에 방문해 보았습니다.

https://react.dev/blog/2023/03/16/introducing-react-dev

Introducing react.dev – React

 

 

 

 

 

Thinking inReact (추후 예시 업데이트 예정)

https://react.dev/learn/thinking-in-react

Thinking in React – React

어떻게 하면 React 스럽게 개발할 수 있을까요? 아래내용은 React 공식문서를 정리한 내용입니다.

 

 

1. 세가지 부분으로 나누어 생각하세요

- 프로그래밍 적으로 나누어서 개발해야하는가? 

- CSS로 구현해야하는 부분은 어디인가?

- Design layer를 어떻게 구현할 것인가?

 

2. 동적인 코드가 들어가지 않은 버전을 만들어 보세요(Mock 버전)

 

3. 보여지는 부분에서 state(화면에서 나타나는 부분 / 전달되지 않는 값)을 구분하세요

-(사족) 아마 이 부분은 hook을 사용해서 React를 구현할 때 중요한 부분이지 않을까 싶습니다. useState, useHistory, useEffect등 상태 변화에 민감하게 대처할 수 있는 프론트 특징을 가지고 있는 만큼 언제 데이터가 들어오고, 보여지고, 업데이트 되는지 Design layer별로 민감하게 알고 있어야 할 것 같아요

 

4. State가 어디서 관리되어야 하는지 파악하세요

- you need to identify which component is responsible for chainging this state -> (사족)어디서 이 state를 관리하는지 알아야 합니다. 예를 들어 a화면에서 값이 바뀔때 b화면이 이 state가 변경되어야 하면 그 루트가 뚤려 있어야 합니다.

 

 

 

 

이 페이지에서는 대략적인 React의 구현법을 설명하고 있습니다. 가장 아래쪽으로 가면 https://react.dev/learn/describing-the-ui 링크에서 React Component를 심오하게 다루는 법을 설명하고 있으니 관심있으면 여기도 더 읽어보시는걸 추천합니다!

 

2024년 1월 25일 기준 위 설명이 예시가 없어 허전한데 2월이 가기전에 예시를 넣어 더 옹골찬 내용으로 돌아오도록 할께요 ❤️