[프로젝트] Wiki 프로젝트 리팩토링 리뷰

Notice

Recent Posts

Recent Comments

Link

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

Tech is created to fix problem

[프로젝트] Wiki 프로젝트 리팩토링 리뷰 본문

React.js

[프로젝트] Wiki 프로젝트 리팩토링 리뷰

furaha 2023. 11. 5. 16:14

🗼리팩토링 리뷰1

"index.html <head> 정보를 관리하자"

index.html

<noscript>You need to enable JavaScript to run this app.</noscript>

이 태그의 의미는 자바스크립트를 활성화하지 않아서 활성화하라고 안내하는 태그이다.

React에서도 index.html에서 해야할 일들이 있기 때문에 활성화를 해주어야 하며

보통 해야할 일들은 google analytics 와 같이 분석할 때도 index.html 에 코드를 넣어준다.

혹은 특정 페이지나 컴포넌트에서만 불러와야 할 스크립트가 있다면?

React Helmet을 사용하면 된다.

React Helmet은 <head> 정보를 동적으로 변경할 수 있게 해주는 라이브러리이다.

이 라이브러리를 사용하면 다른 컴포넌트에서 <head> 정보를 변경할 수 있다.

🗼리팩토링 리뷰2

"useState에 타입지정 습관화"

const [displaySidebar, setDisplaySidebar] = useState(false);

--> const [displaySidebar, setDisplaySidebar] = useState<boolean>(false);

상태 관리할 때, 초기 상태의 타입을 지정해주는 것을 습관화하자.

🗼리팩토링 리뷰3

"보안 혹은 코드 가독성을 위해 url 관리는 따로 하자"

a링크에 외부 링크나 혹은 img src에 외부 링크를 가져올 때, 환경변수나 다른 파일에서 관리하는 것이 보안이나 코드 가독성에 좋다.

혹은 a 링크 rel에 noopener 과 noreferrer 속성을 넣어준다면, 링크가 새 창으로 열리되 원래 페이지로 돌아올 수 없게 하던지 새 창에 기존 페이지의 정보를 가지고 가지 못하도록 방지할 수 있다. 이렇게 해주면 보안적인 측면에서 안전하게 관리할 수 있다.

🗼리팩토링 리뷰4

"async/await 는 try catch문 사용으로 에러 핸들링이 필수이다"

🗼리팩토링 리뷰5

"useMemo로 성능을 상향시키자"

Before)

  if (location.pathname.startsWith("/employee/team")) {
    selectedKey = "team";
  } else {
    selectedKey = "member";
  }

After)

const selectedKey = useMemo(() => {
  return location.pathname.startsWith("/employee/team") ? "team" : "member";
}, [location.pathname]);

Before)

const selectList = ['공부꿀팁', '이벤트', '유머'];

After)

const selectList = useMemo (() => ['공부꿀팁', '이벤트', '유머'],[])

🗼리팩토링 리뷰6

"한 컴포넌트 안에서도 스타일, 상태 선언, 함수, 훅관련 그룹화 해주자"

🗼리팩토링 리뷰7

"React.FC의 사용은 개취"

Before)

const Slide: React.FC<ISlideProps> = ({ backgroundColor, text, imageSrc, link }) => {

After)

const Slide = ({ backgroundColor, text, imageSrc, link }: ISlideProps) => {

🗼리팩토링 리뷰8

key는 index를 활용하는 것보다
key={work-time-data-${index}} 이런 식으로 고유한 문자열 값으로 만들도록 권장

어떤 페이지에서든 겹칠 일이 없게하기 위해서!!!

🗼리팩토링 리뷰9

상수 별도 관리 엄청 추천,,,,

그냥 string 도 아니고 "category1 | category2 | category3" 이런식으로

또한 useEffect 함수도 익명함수보다 이름을 붙여주는 것도 추천

Before)

useEffect(() => {
    setLike(Number(likeData));
    setCommentList(commentsListData);
  }, []);

After)

이런 경우 useEffect가 무슨 역할을 하는지 함수명을 적어줘도 가독성에 도움이 됩니다.

useEffect(function setDefaultValueOnMount () {
// ..

}, [ ])

🗼리팩토링 리뷰10

"타입을 불러올 때는 type 명시"

import type {MyType} from "./myModule";

🗼리팩토링 리뷰11

라이브러리 선택 이유.....리드미에 적으면 좋음

🗼리팩토링 리뷰12

import 할 때, 딥한 상대경로를 피하려면 path alias 사용 추천

참고링크

다음 프젝에는 꼭 생각하면서

이유가 있는 코딩을 하자,,,

'React.js' 카테고리의 다른 글

[프로젝트] okky 사이트 클론 초기세팅 (0)	2023.11.05
[프로젝트] Wiki 프로젝트 성능, 이미지 최적화 (0)	2023.11.05
[React] ⛔️브라우저 뒤로가기⛔️ 이전 History가 아닌 Home으로 이동하기 (1)	2023.10.06
[React] useParams, useEffect, 중첩라우팅 (0)	2023.09.26
[React] 쌩초보가 반드시 겪는 오류 : 즉시실행함수 (0)	2023.09.26

'React.js' Related Articles

Tech is created to fix problem

[프로젝트] Wiki 프로젝트 리팩토링 리뷰 본문

[프로젝트] Wiki 프로젝트 리팩토링 리뷰

🗼리팩토링 리뷰1

🗼리팩토링 리뷰2

🗼리팩토링 리뷰3

🗼리팩토링 리뷰4

🗼리팩토링 리뷰5

🗼리팩토링 리뷰6

🗼리팩토링 리뷰7

🗼리팩토링 리뷰8

🗼리팩토링 리뷰9

🗼리팩토링 리뷰10

🗼리팩토링 리뷰11

🗼리팩토링 리뷰12

'React.js' 카테고리의 다른 글

티스토리툴바