아무거나

React + Typescript 에서 FC 를 사용하면 안되는 이유 먼저 React17 이하에서는 아래와 같이 React.FC 사용이 가능하며 React18 이상부터는 없어졌다고 한다. 참고 그러나 FC 를 사용하는건 좋은 방법이 아니며 CRA 에서는 여러가지의 이유로 FC 를 없애야 한다고 이슈가 올라왔었고 반영되었으며 이유는 아래 설명을 참고하자. children 을 암시적으로 가지고 있다. FC 를 이용한 컴포넌트 props 는 type 이 ReactNode 인 Children 을 암묵적으로 가지게 되며 이는 꼭 타입스크립트에 한정하지 않더라도 안티패턴이라고 한다. 왜냐하면 children 이라는 암묵적이었던 키워드는 자식노드가 필요한지 아닌지의 의도를 명확하게 드러낼 수 없다는, 타입의 관점에서..

Mocking 라이브러리를 활용하자 프론트엔드 개발시에 가장 이상적인 프로세스는 기획, 분석, 백엔드 개발, 프론트 개발들의 작업들이 서로 겹치지 않고 각각 진행되는 것이 좋다. 하지만 진행하는 과정에서 나오는 이슈 또는 요구사항의 변경등으로 인하여 번거롭게 작업을 진행해야되는 경우가 많다. 또한 프론트 엔드 영역과 백엔드 영역에 대한 일정이 서로 겹치게 동시 진행하는 경우도 많으므로 백엔드의 API 의 의존적이게 작업해야하는 프론트엔드의 경우는 백엔드 API 기능들이 개발서버에 배포되기 전까지 프론트엔드에서는 진행하기에 번거롭다. (물론 백엔드쪽에서 굳이 개발서버 배포를 안해도 로컬에서도 바로 확인 할 수 있는 다른 방법들이 있지만 인원이 많을 경우 변동성이 적은 개발서버 기준으로 작업하는것이 안정적이..

Document 체크박스 만들기 state에 checkbox관련 값 정의 this.state = { setCheckedCnt: 0, allChecked: false, } render에 체크박스 관련 값 추가 render() { ... let chkInput // 전체 체크 박스 if (!allChecked || setCheckedCnt === 0) { chkInput = this.handleAllChk()} checked={false} /> } else { chkInput = this.handleAllChk()} checked={true} /> } return ( ... {/* item: 반복문의 element 값, rowIdx: number값 */} handleChk(item.rowIdx)} /> ....

React Hook을 이용한 Functional Component 구현 // tsx import * as React from 'react' ... interface IProps { history?: History, } interface IStateProps {} interface IState { testVal: string, } type Props = IProps & IStateProps const Home: React.FC = ({ history }) => { const [state, setState] = React.useState({ testVal: 'TEST', }) const { testVal } = state // componentDidMount React.useEffect(() => {} //..

Redux 리덕스는 상태관리 라이브러리이다. 리덕스는 우리가 만드는 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다. 아래 그림을 참고하자. 왼쪽은 Redux를 적용하지 않은것이고, 오른쪽은 Redux를 사용한것이다. 위의 이미지의 왼쪽 그림에서 만약 A에서 B로 데이터가 변경되거나 렌더를 다시해야 될 때 과정은 화살표 방향처럼 연결되어 있는 다른 컴포넌트들에게 상태가 전달된다. 이러한 나뭇가지식 관리를 하게 된다면 향 후 관리범위가 많아져서 골치아픈 상황이된다. 이러한 부분을 개선하고자 Redux를 사용하게 된 것이다. Redux는 Applicat..

Typescript with React + Redux 프로젝트 생성 먼저 타입스크립트 기반 프로젝트를 생성 create-react-app react-typescript-redux-example-1 --scripts-version=react-scripts-ts // 실행방법 cd react-typescript-redux-example-1 yarn start 원활한 개발 환경을 위하여 tslint 설정값을 수정하자. [tslint.json] { "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"], "linterOptions": { "exclude": [ "config/**/*.js", "node_modules/**/*.ts"..

React-Router React-Router란 특정 URL로 유저가 접근했을 때, URL을 해석하여 기존에 개발자가 선언한대로 요청한 URL에 알맞는 React Component를 렌더링해서 보여주는 역할 Facebook 공식 라이브러리는 아니지만 React 관련 Router 라이브러리 중에서는 가장 많이 사용 React Router V4 React Router의 최신버전 React Router v3, 그 이하와는 API가 다름 V3도 여전히 유지보수 진행중 대부분의 동작이 React Component로 이루어짐 React Router 설치하기 전에.. 기존에 create-react-app이 설치되어있어야 한다. create-react-app . --scripts-version=react-scripts..

Component Props, State Props 컴포넌트 외부에서 컴포넌트로 넣어주는 데이터(함수도 가능) 컴포넌트 내부에서는 자신의 props를 변경할 수 없다. 물론 돌아가면 가능은 하다. 컴포넌트 외부에서 props 데이터를 변경하면, render가 다시 호출된다. State 컴포넌트 내부의 데이터 클래스의 프로퍼티와는 다르다. 프로퍼티는 변경한다고 render가 호출되지 않는다. 생성자 혹은 프로퍼티 초기 할당으로 state를 초기 할당 해줘야 한다. 내부에서 변경을 하더라도 setState 함수를 이용해야 render가 호출된다. 초기 세팅시 주의할 점(state 초기 할당 관련) [index.tsx] import * as React from 'react'; import * as ReactD..

React 프로젝트 생성 Create React App Create React App은 React의 작업 환경을 자동으로 구축해준다. Dan Abamov가 만들었다(Redux를 만든사람으로 유명하다) 프로젝트 생성 create-react-app {프로젝트명} 개발 서버 실행 npm run start 프로덕션 빌드 npm run build 테스트 npm run test 프로젝트의 구조가 바뀜(ex:위험도가 높으므로 사용을 지양) npm run eject pwa(Progressive Web App) 적용 Create React App 설치 create-react-app global 설치 npm i create-react-app -g // create-react-app {프로젝트명} 으로 설치 // .은 현재..

React 해당 내용을 보기전 react기본 의 react-app-example-1 부터 선행하시면 좋습니다. React? React Component: 작업의 단위 Virtual DOM: Virtual DOM으로 그린다음에 변경 되기 전의 상황과 변경 된 후의 Virtual DOM의 State들을 비교해서 바뀐부분(=diff)만 추출해내서 그 부분만 다시 render를 해주는것이 react의 핵심이다. (State Change -> Compute Diff -> Re-render) JSX Javascript XML - JSX 자체는 문법 리액트에서는 JSX.Element로 그려질 Component를 표현한다. React.createElement 함수를 통해서도 JSX.Element 를 만들수 있다. [J..