104%

타입스크립트로 리액트 코드를 작성하다보면 컴포넌트의 타입을 정해줘야하는데 너무 여러가지 타입이 있어서 헷갈려서 정리하고자 합니다. 배경지식 클래스형 컴포넌트는 render메소드에서 ReactNode를 리턴한다. 함수형 컴포넌트는 ReactElement를 리턴한다. JSX는 바벨에 의해서 React.createElement(component, props, ...children) 함수로 트랜스파일된다. html 처럼 생긴 문법을 리액트 라이브러리의 렌더링 함수로 변환하는것이다. 그래서 JSX를 사용하지 않고도 리액트를 사용할 수 있으나(JSX없이 사용하는 React) 이렇게 하면 매우 불편하다. // jsx Hello {this.props.toWhat} JSX는 아래 처럼 변경된다. // transpile ..

프로젝트를 하던 중 DOM을 참조해야 하는 일이 생겼는데 기존 자바스크립트에서 돔을 가져오는 getElementById와 리액트에서의 방식 ref 중 어떤것이 더 나은 방법인가 궁금해서 찾아보았다. In general, refs is better than document.getElementById, because it is more in line with the rest of your react code. 일반적으로, ref가 document.getElementById보다 더 좋다. 왜냐면, 너의 리액트로된 나머지 코드들과 더 잘 맞기 때문이다. In react, every component class can have multiple component instances. 리액트에서는 모든 컴포넌트가 여러..

프로젝트를 진행하면서 useEffect를 사용할때 가끔씩 이상하게 동작할때가 많았습니다. useEffect에서 리덕스 스토어의 값을 참조할때 예전값을 가져오는등의 현상이 발생해서 훅스를 제대로 이해하지 못하고 사용하는것 같아 이번 기회에 정리해보려고 합니다. 훅스를 쉽게 이해하기 위해 컴포넌트 라이프사이클 개념을 가져다 쓰다보니, 자꾸 엇나가는 부분이 생긴것같습니다. 훅스를 제대로 이해하기 위해서는 라이프 사이클을 잊으라고 말합니다. 렌더링 마다 고유한 Props와 State가 있다. function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click m..

이 글을 제대로 이해하려면 브라우저의 로딩 과정에 대해서 알아야 합니다. Virtual DOM? 가상 돔? 위 포스팅을 읽고 오셨다면 이제 리플로우가 뭔지 정확히 아셨을겁니다. 똑같은 Single Page Application을 자바스크립트나 제이쿼리로 구현한것과 리액트로 구현한것은 성능상의 큰 차이가 생깁니다. 우리가 바닐라 자바스크립트로 SPA를 구성하면 다음 프로세스를 거쳐야 합니다. 1. 변경하고자 하는 컴포넌트에 접근(querySelector, document.getElementById, document.getElementByClass 등..) 2. 컴포넌트를 조작 (show, hide, coloring 등등..) 3. 브라우저가 변화된 컴포넌트를 반영하기 위해서 리플로우 발생. 문제는 컴포넌트..

아토믹 디자인은 컴포넌트를 5개의 단계로 나눈다. Atoms(원자) button, icon, input등과 같이 컴포넌트의 최소단위를 의미한다. (보통 HTML 태그가 원자의 단위가 된다.) 원자는 컬러, 폰트, 애니메이션등을 포함한다. MoleCules(분자) 원자를 결합하여 분자를 만든다. INPUT 원자와 BUTTON 원자를 합쳐 검색창 분자를 만들수있다. Organisms(유기체) 분자들을 결합하면 유기체가 된다. 검색창 분자와 메뉴 분자 두개가 합쳐서 헤더라는 유기체를 만들었다. 유저는 유기체 단위로 사이트를 인식하기 시작한다. 유기체는 독립적이어야 하며(standalone), 쉽게 여기저기 옮길수 있어야하고(portable), 재사용(reusable)이 가능해야한다. Template(템플릿) ..

hydration = 수화 수화란 우리 몸에 수분을 보충하는 행위를 뜻한다. 리액트에서 왜 hydration이라는 용어를 사용하는건지는 아래 내용을 살펴보고 다시 한번 생각해보자. 리액트는 DOM에 리액트 컴포넌트를 렌더링해주는 render 메소드를 제공한다. ReactDOM.render(element, container[, callback]) 컨테이너 DOM에 리액트 엘리먼트를 렌더링하는 함수이다. 이 render함수는 컨테이너의 자식으로 리액트 컴포넌트를 넣어주는데, 기존에 이미 렌더링 된 리액트 컴포넌트가 있다면 새로 렌더링 하는게 아니라 업데이트만 해준다. 그리고 렌더링이 완료되면 세번쨰 인자로 전달된 콜백이 실행되게 할 수 있다. 즉 ReactDom의 render메소드는 컴포넌트를 렌더링한 후에..

CRA에선 어떻게 이미지를 처리하는가? 10KB미만의 이미지 파일은 data URI의 형태로 변환되어 html에 포함된다. url-loader가 이미지 파일을 만나면 data URI 형태로 변경해주기 때문에 가능한것이다. 이렇게 하면 http 요청수를 줄일 수 있고, bmp, gif, jpg, jpeg, png에만 적용되고 svg는 제외된다. 물론 10KB라는 수치도 변경이 가능하다고 한다. data URI란 간단히 말하면 작은 크기의 파일을 문서내에 인라인으로 포함하기 위해서 사용된다. 아이콘을 base64로 인코딩하여 data URI형태로 문서에 인라인 하는 방식을 많이 사용한다. SVG는 왜 제외 됬는가? 이슈 내용을 살펴보면 CRA가 버전 0.8로 업데이트 되면서 url-loader를 사용하여 1..

이전 버전에서는 리액트만으로 상태관리하기가 굉장히 힘들었다. 부모와 자식간의 상태 교환만 가능했기 때문에 프로젝트 규모가 커질 수록 상태관리가 어려워 유지보수 하기가 점점 어려워진다. 이걸 극복하기 위해서 Redux나 Mobx를 사용하는데 이런 상태관리 라이브러리들의 기반이 되는 리액트의 Context API를 살펴보자. 리액트 16.3 이후 버전부터 이 Context API가 사용하기 쉽게 개편됬다고 한다. 그래서, 지금은 단순히 전역상태 관리만 필요한 프로젝트라면 리덕스를 굳이 쓰지 않아도 괜찮은것같지만, 나중에 비동기 처리를 하게 될지도 모르기 때문에 그냥 처음부터 리덕스를 쓰는게 나은것같다.(개인적인 의견) 정적 Context 사용해보기 src/contexts/color.js 먼저 저장창고 역할을..