우아한 테크코스 미션을 진행하면서 react를 아래와 같이 js로만 작성했었는데, https://github.com/woowacourse/react-shopping-cart/pull/4 레벨2가 끝나기전 typescript를 적용해보고자, 개인적으로 ts로 마이그레이션했다. https://github.com/zereight/ts-react-shopping-cart 아직 테스트코드는 마이그레이션하지 않았고, interface 등 중복 코드들도 리팩토링하지 않은 상태에다가, 디렉토리 구조도 쪼금 변경한 상태이지만 기능은 정상적으로 동작하는 선에서 모두 변환을 하였으므로 ㅎ 느낀점을 정리한다. 1. FC, VFC 다른 크루들의 코드를 보니까 컴포넌트의 타입을 React.FC, React.VFC를 많이 사용하는..

ts-watch를 사용하는데 Require stack: - /node_modules/tsc-watch/lib/tsc-watch.js /node_modules/tsc-watch/index.js 와 같은 에러가 뜬다면, 아마도 typescript가 global로 설정되어있고 해당 워크스페이스에 typescript가 설치가 안되어 있을 것이다. yarn add global typescript말고 yarn add typescript를 해주자.

나는 react로 프로그래밍을 할 때 styled-component (emotion)같은 CSS-in-JS 라이브러리를 사용하여 프로그래밍을 했다. 그 이유는 https://blog.logrocket.com/8-reasons-to-use-styled-components-cf3788f0bb4d/ 에 자세히 설명되어있고, 이 아티클을 인용하여 글을 작성한다. React에서 컴포넌트에 스타일링을 하는 방법은 다음과 같다. 1. 외부 CSS 파일에 CSS코드를 작성하여 className으로 속성을 전달하기 2. inline CSS를 react component 안에 넣기 3. CSS-in-JS 1. 외부 CSS 파일에 CSS코드를 작성하여 className으로 속성을 전달하기 => 대규모 어플리케이션 프로젝트의..

react로 개발을 하다보면, 상태관련 로직이 중복되는 경우를 발견할 수 있다. 이때에는 HOC이나 render props를 사용하여 중복되는 코드를 줄일 수 있는데, 커스텀 훅을 사용하면 위 방법을 사용하지 않고도 그것을 가능하게 해줍니다. 커스텀 훅을 사용함으로써 상태관련 로직을 재사용할 수 있으며, 각 state가 각각 완전히 독립적이게 할 수 있습니다.

공식문서 ko.reactjs.org/docs/hooks-intro.html#motivation "훅은 컴포넌트로부터의 상태 관련 로직을 추상화 할 수 있다." 훅이 있기 전까지는 class 컴포넌트를 사용했습니다. class는 그 자체가 새로운 인스턴스를 반환하고 그 인스턴스는 "this"를 저장하고 있기 때문에, 그 인스턴스 자체가 react에서 알고 있는 값이 되므로 react에서 제거하지 않는 이상, 페이지가 새로 렌더링 되더라도 해당 인스턴스를 기억하고 있기때문에, 상태관리를 자유롭게 할 수 있기 때문입니다. 반면에 함수 컴포넌트는 함수의 라이프 사이클 특성상, 생성 -> 갱신 -> 제거 과정을 거치고 return이 되면 메모리상에서 제거된다. 그렇기 떄문에 함수 컴포넌트는 자신의 동작이 끝나면 ..

이제 리액트의 핵심기능 중 하나인 createElement를 구현해보자. 코드를 먼저보자! const TinyReact = (() => { const createElement = (type, attrs = {}, ...children) => { // 최하위 자식부터 돌 수 있도록 child를 재귀로 구현해야함. const childElements = []; children.forEach((child) => { if (child !== null && child instanceof Object) { childElements.push(child); } else { if (typeof child !== "boolean") { childElements.push(createElement("text", { textC..

리액트는 JSX라는 문법을 사용합니다. 하지만 자바스크립트는 해당 문법을 모릅니다! "저는 리액트 쓰는데 jsx써도 잘만 되던데요?" 맞다. 왜냐하면 바벨에서 jsx문법을 읽을 수 있기 때문이다. 실제 바벨로 번역해보자 a를 보면 jsx문법인데 우측에서 React.createElement로 자동 변환되어 적용된것을 볼 수 있다. 우리는 React라고 말해주지도 않았는데, JSX문법을 보고 바로 React.createElement로 바꿔버린 것이다! 하지만 우리는 JSX 문법을 쓰고 React는 우리가 만들어 나갈 것이기 때문에 별도의 셋팅이 필요하다. 위 코드에는 생략되어 있지만 위 코드는 아래와 같다. 파일의 최상단에 주석으로, jsx문법에 사용할 함수를 우리가 직접 정할 수 있다. 기본값으로 Reac..

리액트는 어떻게 동작하는 걸까? 아무래도 라이브러리를 뜯어보지 않는 이상은 개념적으로만 동작 방식을 알고 있을 것이다. 좀 더 완벽한 이해를 위해서, 이번 포스팅 시리즈를 통해 (완벽하지는 않지만) 리액트 기능을 비슷하게 따라할 수 있도록 구현을 하는 방법을 차례대로 포스팅할 계획이다. 셋팅 위 폴더를 다운받아서 프로젝트를 초기 셋팅을 하자. scripts 폴더엔 babel이, style 폴더안에는 css 들이, dom.js에는 react 로직이 들어갈 것이고 (예정), index.js에는 실제로 테스트할 수 있는 코드들이 들어갈 것이다. (예정) 그리고 index.html에서는 그 파일들을 사용하고 있으며 참고로 dom.js, index.js는 script type이 text/babel이다. 실제로 서..