React functional component

20년 04월 28일 | 조회수 364
avatar
EUGENE JOO
Wasder

리액트 쓰시는 분들 react functional component 많이들 쓰시나 궁금합니다. 최근 1-2년 사이에는 class 베이스에서 functional 로 넘어가는게 유행인 것 같긴 한데 퍼포먼스 측면에서는 큰 차이는 없는 것 같습니다. 처음에 setState() 나 hook 같은 부분을 잘 이해하는게 중요한 것 같구요. 저희는 요새 styling 도 jsx 안에서 해보는 것을 시도해보고 있습니다. ```.jsx const detailContents = styled.div` padding: 10px; `; ``` 뭐 이런 식인거죠. 이렇게 하면 대개 (foo.jsx, foo.scss) pair 로 파일이 늘어나는데, 반으로 줄일 수 있게 됩니다. jsx 파일 크기가 대신 커지지만, 스타일이 간단한 파일의 경우에는 굳이 파일 하나를 새로 안만들어도 되어서 비교적 가볍게 갈 수 있다는 장점이 있습니다. js 쪽은 커뮤니티 변화가 워낙 빠르고 활발하다보니 유행도 자주 바뀌는 것 같습니다. 다른 분들은 어떤 소소한 팁/습관이 있는지 궁금하네요!

댓글 3
공감순
최신순
    작명센스
    억대연봉
    20년 05월 04일
    요즘도 이런 개념을 구분 하는지는 모르겠는데 Smart component vs Dumb component 로 구별을 해서 Smart component 일 경우, class component 로 만들고 dumb component 일 경우 function component 로 만드는 컨벤션을 갖고 개발했었습니다. 굳이 이미 class 타입으로 만들어 놓은 걸 function 으로 바꿔야할 필요는 없다고 생각이 들어요. 저는 리액트 16.8 까지로만 개발을 했어서 hook 등은 제대로 안 써봐서 그랬던 것일 수도 있어요. 팀 컨벤션에 따라 다를 것 같네요. styled component 는 강추합니다. 각 컴포넌트 별로 wrappin 해주는 엘레먼트(div 같은것)으로 감싸주기만 해도 클래스 이름 충돌 문제를 회피하기 위한 전통적인 기법의 단점없이 그 문제를 피할 수 있어 아주 좋더라고요.
    요즘도 이런 개념을 구분 하는지는 모르겠는데 Smart component vs Dumb component 로 구별을 해서 Smart component 일 경우, class component 로 만들고 dumb component 일 경우 function component 로 만드는 컨벤션을 갖고 개발했었습니다. 굳이 이미 class 타입으로 만들어 놓은 걸 function 으로 바꿔야할 필요는 없다고 생각이 들어요. 저는 리액트 16.8 까지로만 개발을 했어서 hook 등은 제대로 안 써봐서 그랬던 것일 수도 있어요. 팀 컨벤션에 따라 다를 것 같네요. styled component 는 강추합니다. 각 컴포넌트 별로 wrappin 해주는 엘레먼트(div 같은것)으로 감싸주기만 해도 클래스 이름 충돌 문제를 회피하기 위한 전통적인 기법의 단점없이 그 문제를 피할 수 있어 아주 좋더라고요.
    ...더보기
    답글 쓰기
    0
    리멤버
    @멘션된 회사에서 재직했었음
    19년 05월 28일
    회사에서 풀지 못한 고민, 여기서 회사에서 업무를 하다가 풀지 못한 실무적인 어려움, 사업적인 도움이 필요한 적이 있으셨나요? <리멤버 커뮤니티>는 회원님과 같은 일을 하는 사람들과 이러한 고민을 해결할 수 있는 온라인 공간입니다. 회원 가입 하고 보다 쉽게 같은 일 하는 사람들과 소통하세요
    회사에서 풀지 못한 고민, 여기서 회사에서 업무를 하다가 풀지 못한 실무적인 어려움, 사업적인 도움이 필요한 적이 있으셨나요? <리멤버 커뮤니티>는 회원님과 같은 일을 하는 사람들과 이러한 고민을 해결할 수 있는 온라인 공간입니다. 회원 가입 하고 보다 쉽게 같은 일 하는 사람들과 소통하세요
    답글 쓰기
    0
    리멤버
    @멘션된 회사에서 재직했었음
    19년 05월 28일
    일하는 사람과 기회를 연결하여 성공으로 이끈다
    일하는 사람과 기회를 연결하여 성공으로 이끈다
    답글 쓰기
    0
추천글
대표전화 : 02-556-4202
06235 서울시 강남구 테헤란로 134, 5,6,9층
(역삼동, 포스코타워 역삼) (대표자:최재호, 송기홍)
사업자등록번호 : 211-88-81111
통신판매업 신고번호: 2016-서울강남-03104호
| 직업정보제공사업 신고번호: 서울강남 제2019-11호
| 유료직업소개사업 신고번호: 2020-3220237-14-5-00003
Copyright Remember & Company All rights reserved.