Front-End/React40 [React] 리엑트 코딩 팁 안녕하세요, 개발자 Sean입니다. 퇴근 시간 버스를 놓쳐서 블로그 글을 읽던 와중 꽤 괜찮은 글이 있어 번역해 옮겨 봅니다. 더 나은 리엑트 코드를 위한 팁 코드를 잘 작성하는 것이 왜 중요할까요? 이유는 코드는 가능한 깔끔할수록 유지보수에 용이하기 때문입니다. 좋은 개발자가 되기 위해서, 작동하는 코드가 아닌 작동하는 좋은 코드를 작성할 줄 아는 것은 중요합니다. 그래서 아래에 리엑트를 처음 배울 때 알았으면 좋았을 몇 가지 팁을 공유해 드립니다. Use fragments 리엑트에선 하나의 컴포넌트에 여러 개의 자식 컴포넌트를 리턴할 수 없습니다. 만약에 그런 시도를 하게 된다면 이런 에러 메시지를 보게 될 것입니다. "Adjacent JSX elements must be wrapped in an e.. 2022. 11. 16. [React] Single Responsibility Principle 리펙토링 하기 안녕하세요, 개발자 Sean입니다. 저번 포스팅에서 SOLID 원칙에 대한 공부를 해봤으니 본격적으로 코드 리펙토링에 들어가려고 합니다. 우선은 오늘 제가 수정할 코드는 아래와 같습니다. const Analytics = () => { //States const [isLoading, setIsLoading] = useState(false); //Hooks const dispatch = useDispatch(); const analytics = useSelector((state) => state.analytics); const user = useSelector((state) => state.user); useEffect(() => { getTabList(); }, []) //Methods const getT.. 2022. 11. 1. [React] 리엑트에 SOLID 원칙 적용시키기 안녕하세요, 개발자 Sean입니다. 오늘은 베타 버전을 끝마치고 이제는 뭘 해야 할까... 뒹굴대다가 본격적으로 리펙토링을 가지는 시간을 좀 가져볼까 합니다. 그래서 리펙토링을 어떤 원칙을 가지고 접근하면 좋을까 고민하다 아래와 같은 좋은 글이 있어 옮겨봅니다. Applying SOLID principles in React 소프트웨어 산업이 성장하며 개발자들이 수많은 우여곡절을 겪음에 따라 모범사례와 우수한 소프트웨어 설계 원칙이 나타나고 미래에 똑같은 실수를 방지하기 위해 개념화되었습니다. 특히 객체 지향 프로그래밍의 세계에서 이러한 모범사례가 수많이 개발되었고 SOLID는 의심의 여지없이 더욱 영향력을 키우게 되었습니다. SOLID는 각각의 글자가 다섯개의 설계 원칙을 의미하는 축약어 입니다: Sin.. 2022. 10. 31. [React] 선언형과 리엑트 안녕하세요, 개발자 Sean입니다. 라이브러리를 공부할 때 다른 참고서나 설명 블로그를 참조하는 방법도 좋은 방법이지만 뭐니 뭐니 해도 공식 라이브러리 설명 페이지가 개발자의 의도를 가장 잘 설명하겠죠? 따라서 저도 이번에 한 번 처음부터 찬찬히 살펴보려고 합니다. 어느정도 리엑트에 대한 이해도가 생긴 상태에서 공식 페이지를 읽어보니 새삼 이전에는 생각치 못했던 여러 의문이 생겼습니다. 그중 하나가 아래와 같은 설명입니다. 선언형 React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 합니다. 선언형 뷰는 코드를 예측 가능하고 디버그 하기 쉽게 만.. 2022. 10. 20. [React] 커스텀 훅 이용하기 안녕하세요, 개발자 Sean입니다. “Young man, in mathematics you don't understand things. You just get used to them.” ― John von Neumann 컴퓨터의 아버지로 불리는 폰 노이만 선생님께서 하신 말씀입니다. 일찍부터 알았더라면 어땠을까... 생각하게 되는 명언이죠 ㅎㅎ 최근 리엑트를 매일같이 다루면서 다시 한번 떠올리게 되어 적어보았습니다. 이전에 리엑트를 공부할 때 커스텀 훅과 관련된 내용을 읽어본 기억이 납니다. 그때까지만 해도 커스텀 훅의 필요성을 느끼지 못했기 때문에 뭔가 대단히 어렵고 사용하기 난해한 기술로 여기고 여태까지 단 한 번도 사용하지 않았는데요, 업무를 보면서 그리고 코드에 대해 익숙해지면 질 수록 그 필요성.. 2022. 10. 19. [React] Build 후에 CSS 사라짐 현상? 이번 주 가벼운 마음으로 개인 프로젝트를 진행하다가 배포 업데이트를 하려고 build를 하고 build 된 어플을 실행시켜 보았다. 그런데 이게 뭔 일인지.... 스타일이 몽땅 사라져 있는 것이었다. 이전에 똑같은 방식으로 build 해서 배포할 때는 아무런 문제가 없었는데 갑자기 지금에 와서야 이러는 이유를 모르겠다. 거기다 로컬에서 돌렸을 때는 스타일이 모두 잘 적용되어서 돌아가고 있었다. 무엇이 문제인지 한참을 헤메다가 원인을 찾게 되었다. 원인은 styled-components의 GlobalStyles 컴포넌트 때문이었다. 지금까지 index.js에 컴포넌트보다 상위의 위치에 컴포넌트를 위치시켰는데, 문서를 살펴본 결과 컴포넌트와 같은 위치 혹은 더 아래의 위치에 를 위치시켜야 한다고 한다. im.. 2022. 8. 14. [React] 리엑트 컴포넌트가 두 번 렌더링 되는 이유? 이번 스프린트를 마치기 전 데모를 해보다가 화면상 표시되는 데이터가 실제 데이터와 다르다는 사실을 발견했다. 원인을 찾아보니 동료 개발자가 의도치 않게 자료형에 Mutation을 일으켜 잘못된 데이터가 표시된 것이었다. 그리고 Mutation이 발생한 이유는 2회 컴포넌트가 렌더링 되면서 함수가 두 번 실행되었기 때문이라는 사실도 알게 되었다. 사실 이전 부터 궁금하긴 했었다. useState 혹은 useEffect를 사용한 컴포넌트에서 콘솔을 찍으면 항상 두 번 프린트되었기 때문이다. 그래서 오늘은 관련해서 왜 그런지 찾아보았고 재밌는 글을 발견해 번역해 옮겨 본다. My React components render twice and drive me crazy 모던 리엑트를 사용하는 수 많은 프론트엔드 .. 2022. 7. 29. [React] 리엑트 디자인 패턴: Return Component From Hooks React Design Patterns: Return Component From Hooks "Partical Application"으로 부터 영감을 받은 새로운 형식의 패턴: Material-UI와 타입스크립트를 이용한 예제와 함께 훅이 리엑트 커뮤니티에 소개된 지 수년이 흘렀고, 이로 인해 코딩 패턴에 많은 변화가 생겼다. 이번 글에서는, 'partial application'에서 영감을 받은 새로운 패턴에 대해 공유해보고자 한다. 필자는 이를 'Return Component From Hooks'라고 부른다. 간단한 예제로 시작해보자: 팝업 메뉴를 여는 버튼을 추가하자 메뉴를 열고 닫는 상태 관리 메뉴 아이템 클릭 핸들러 import React from "react"; import Button from.. 2022. 6. 30. [React] 2022 리엑트 컴포넌트 디자인 패턴 많은 스타트업에서 그러하듯 초기 프로토타입 플랫폼은 인하우스가 아닌 외주 업체를 통해 제작하는 경우가 많다. 현재 필자가 개발자로 근무하는 회사의 플랫폼도 외주 업체에 의해 제작된 애플리케이션이다. 다행히 꼼꼼하고 실력 있는 개발자께서 만들어 주셔서 유지 보수에 문제가 있는 것은 아니지만, 몇몇 부분에서 코드를 읽고 이해하기 난해한 부분들이 있다. 특히, 디자인 패턴에 있어서는 일관성 문제로 코드를 이해하는데 시간을 많이 잡아먹는 문제가 발생하고 있다. 파일명 혹은 클래스명을 토대로 이해하기로는 container - presenter 패턴을 이용한 것으로 생각되나, container와 presenter의 구분이 모호해지는 회색 영역이 코드의 대부분을 차지하며 props drilling 지옥이 필자를 괴롭.. 2022. 6. 30. [React] Controlled vs Uncontrolled component 리엑트를 이용해 어플을 제작하다 보면 심심찮게 아래와 같은 에러 코드를 만날 수 있다. Elements should not switch from uncontrolled to controlled (or vice versa). 이 에러 코드는 Input Textarea Selct 등과 같이 몇몇 태그를 사용할 때 빈번히 나타난다. 관련해서 잘 설명된 글이 있어 번역해 옮겨본다. To Be or Not to Be 리엑트에서 controlled와 uncontrolled 컴포넌트 선택하기 Controlled와 uncontrolled 컴포넌트는 리엑트에서 중요한 개념이다. 어떠한 경우에 어울리는지와 그 차이점을 아는 것은 매우 중요하다. 리엑트에서 controlled와 uncontrolled란 무엇일까? contr.. 2022. 6. 21. [React] 웹 개발에서 리엑트를 사용하는 이유 개발 면접을 보면 높은 확률로 프레임워크에 대한 질문이 나온다. 대부분 왜 사용하나요? 가 주를 이루는데, 필자의 지극히 개인적인 생각으론 굉장히 현실과 동떨어진 면접 질문이라고 생각한다. 대충 다른 프레임워크와의 차이점과 비교 분석 등을 이야기하면 간단하게 넘길 수 있는 질문이지만, 과연 초보 개발자중에 각종 프레임워크 튜토리얼을 진행하고 비교 분석 후 '아! 나는 이러한 이유로 이 프레임워크를 써야겠어!'라고 생각하는 개발자가 몇이나 있을까. 결국 면접자에게 거짓말을 강요하는 셈이다. 필자도 거짓말을 했던 사람 중에 한 명이었고 이런 질문을 받을 때마다 거짓말을 해야 한다는 점이 썩 기분이 좋지는 않았다. 그러다 현업에서 프론트엔드 개발자로 업무를 하게 되면서, 코드에 대한 이해도가 아~~주 약간 쬐.. 2022. 6. 3. [React] 외부 클릭 시 메뉴창 닫기 오늘 토이 프로젝트를 진행하면서 메뉴 버튼 밖을 클릭했을 때 메뉴 컴포넌트가 닫히는 UI를 구현하고 싶었다. 방법에 대해 한참을 고민하다 보니... 최상의 컴포넌트에서 props drilling을 통해 메뉴를 닫는 기능을 구현할까... 하는 생각이 들었지만 어엿한 프론트엔드 개발자를 꿈꾸는 나에게 이것은 올바른 해결법이 아니라는 판단이 들었다. 그래서 구글링을 해보니 해당 방법을 Effect 훅과 Ref 훅을 이용해 해결하는 방법에 대해 참고할 수 있었다. 전체 코드는 이러한데 한번 부분 부분 살펴보자. const Deck = ({data}: Props) => { const [openInnerMenu, SetOpenInnerMenu] = useState(false); const InnerMenuHandl.. 2022. 4. 8. 이전 1 2 3 4 다음
