웹/React8 [React] 클래스형 컴포넌트의 생명 주기(LifeCycle) React에서 클래스형 컴포넌트의 생명주기에 대해 간단히 정리해보겠습니다. 아래는 App 컴포넌트를 클래스형 컴포넌트로 선언하고 클래스형 컴포넌트를 호출한 예제 코드입니다. ... class App extends React.Component { // 생성자 함수 // State의 초기값 설정 constructor(props: Props) { super(props); ... } ... // 렌더링되는 부분 정의 // props나 state가 바뀌어 화면이 갱신되는 경우 호출 render() { ... } // 부모로부터 받은 Props와 State를 동기화할 때 사용 // Props로 State에 값을 설정 or State 값이 Props에 의존하여 결정된느 경우 사용 static getDerivedSta.. 2021. 8. 24. [React] Prefer default export import/prefer-default-export React Project 진행 중 위 에러가 발생했습니다. import ProfilePage from "./ProfilePage"; // import AchievementPage from "./AchievementPage"; export {ProfilePage}; 이 코드를 아래와 같이 수정한 결과 오류를 해결할 수 있었습니다. import ProfilePage from "./ProfilePage"; import AchievementPage from "./AchievementPage"; export {ProfilePage, AchievementPage}; 파일에서 export를 하는 것이 하나인 경우 단순 export가 아닌 export default를 사용하는 것이 권장된다고 합니다. 출처: https.. 2021. 6. 18. [React] useEffect cleanup 함수의 참조 문제 얼마 전 React Native를 이용해 작업을 하다가 useEffect에서 cleanup함수를 사용할 때 cleanup함수의 값이 제가 원하는 값을 참조하지 않는 문제가 있었습니다. 오늘은 이 문제를 살펴볼 예정이고, React로 정리를 해보았습니다. 먼저 아래 코드를 보시죠. import logo from './logo.svg'; import './App.css'; import { useEffect, useState } from 'react'; function App() { const [page, setPage]=useState(0); return( { page===0? setPage(param)} /> : setPage(param)} /> } ) } const StartPage=({ setPage,.. 2021. 6. 17. [React] Typescript를 이용해 React 프로젝트 만들기 Typescript를 사용하는 React 프로젝트를 시작하려면 아래의 명령어를 입력해주시면 됩니다. npx create-react-app my-app --template typescript 기존에 create-react-app을 이용해서 일반적인 프로젝트 생성을 했는데, 뒤에 추가로 --template typescript를 붙여준 것이죠. 출처: https://create-react-app.dev/docs/getting-started Getting Started | Create React App Create React App is an officially supported way to create single-page React create-react-app.dev 2021. 6. 13. 이전 1 2 다음
