전체 글

렌더링이란 ? 쉽게말하면, 화면에 UI요소가 그려지는 or 보여지는 동작을 말한다. 더 딥하게 설명하자면, 코드상에서 props 와 state 에 기반하여 컴포넌트가 그려지는 과정이 될 것이다. 위의 화면에서 사용자가 검색어를 입력하고, 리스트를 추가하고, 체크하고, 삭제하는 과정을 렌더링된다 라고 말할 수 있다. 리액트의 컴포넌트 렌더링 순서 리액트에서 컴포넌트 렌더링 순서는 최하단 컴포넌트 부터 시작해서 최상단 컴포넌트가 마지막 순서가 된다.

원문: https://javascript.plainenglish.io/stop-using-usememo-now-e5d07d2bbf70 번역: https://velog.io/@lky5697/stop-using-usememo-now 을 읽고 재정리하였습니다. useMemo 란 useMemo 는 알다시피 계산결과를 memorization (유사하게, 기억한다 라고 생각하자.) 한다. const result = useMemo(() => { // running.... return value }, [deps]) 코드가 위와 같을 때, deps 로 들어온 state 값에 따라 side effect 로 useMemo 안의 로직이 실행되고 그 결과값을 리턴하게 된다. deps 의 값에 따라 리턴되는 value 값이 다를..

프로젝트가 커질수록 모든 html 요소에 클래스이름을 지어줘야 하고, 스타일 변경시 클래스에 맞는 선택자를 찾아 변경해야 하기 때문에 번거롭다. 이러한 불편함을 해결하기 위해, CSS-in-CSS 방식의 CSS Modules 와 CSS-in-JS 방식을 사용한다. CSS-in-CSS CSS Module CSS모듈은 CSS를 모듈화 하여 사용하는 방식. CSS와 클래스 이름을 만들어 스코프를 지역적으로 제한하면서, 모듈을 불러온다. 이 과정에서 개발자가 지정했던 클래스 이름과 객체가 반환되는 방식으로 작동하게 된다. 모듈화에선 CSS 클래스 이름이 중복되어도 새로운 이름이 입혀져 이름의 중복 및 관리의 위험성이 적어지게 된다. 다만, 여러 파일에 나뉘어서 작성하기 때문에 많은 CSS 파일을 만들어 관리해야..

코딩하면서 시간이 가장 많이 드는 작업은 뭐니뭐니해도 이름짓기가 아닐까 ㅎ ( 다들 얼마나 공감하는 얘기냐면, 아래와 같은 밈도 생겨났다. ) FE개발하는 나에겐 가장 고된 일은 역시나 styled Components 이름짓기. 어떻게 지어야 유지보수가 쉽고 알아보기 쉬울까 늘 고민한다. 웹서핑중, styled Components 이름 컨벤션이 정리되어있는 것 같아 기록한다. 최상위 부모 '컴포넌트명'Layout으로 생성 최상위 부모 자식(바로 하위 요소) '컴포넌트명'Row or '컴포넌트명'Col Row나 Col이라는 실질적인 태그는 div,section태그등이 될 수 있다. Row는 가로, Col은 세로 둘 다 실제 태그는 div여도 flex-direction으로 설정 최상위 부모가 대분류 느낌이라..