반응형 Front-end/React4 Lifecycle 생명주기 이번에는 컴포넌트의 Lifecycle(생명주기)에 대해서 공부했다. 컴포넌트가 렌더링 될 때 몇 가지 상태 변화가 있는데 크게 몇 가지로 나눌 수 있다. 생성될 때 화면에 등장한(mount)후 새로운 props를 받을 때 새로운 상태를 가질 때 새로운 상태를 갖고 난 후 화면에서 사라지기(unmount) 전 이러한 상태 변화들은 생명 주기에 따라 나눌 수 있다. 이전 글의 Toggle 클래스를 불러와 이러한 생명주기를 적용해보면 import React from "react"; import "./styles.css"; function App (){ return ( ); } class Toggle extends React.Component { constructor(props){ super(props) thi.. 2020. 11. 27. this.state와 this.setState 이번에는 클래스형 컴포넌트에서 쓸 수 있는 this.state와 this.setState에 대해서 알아보겠다. state 객체는 내부에서 변화하는 값을 저장하는 하나의 공간이라고 생각하면 되는데 외부로 데이터를 전달해주기 위한(외부로부터 데이터를 전달받기 위한) props 객체와는 조금 차이가 있다. state를 사용하기 위해서는 클래스형 컴포넌트의 생성자에서 정의해줘야 하는데 간단한 사용방법을 예제를 통해 알아보고자 한다. import React from "react"; import "./styles.css"; function App (){ return ( ); } class Toggle extends React.Component { constructor(props){ super(props) this... 2020. 11. 27. Component(컴포넌트)와 Props 이전 React 글에 이어 오늘은 Component와 Props에 대해서 복습을 해볼까 한다. 리액트 공식문서를 좀 참고했다 ! import React from "react"; import "./styles.css"; function App() { return ( Hello World ); } export default App 이것은 함수형으로 작성된 컴포넌트이다. 이렇게 함수형으로 작성된 컴포넌트는 클래스형 컴포넌트로 바꿀 수 있는데 React.Component를 상속받아서 만들면 된다. import React from "react"; import "./styles.css"; class App extends React.Component { render(){ return ( Hello World ); }.. 2020. 11. 27. React의 주요 개념과 사용법 이번 주는 React에 대해서 공부했다. 정말 처음 시작이 너무 어려웠지만 며칠 동안 고생한 덕에 이제 조금은 이해가 간다. 오늘은 정리 및 복습을 위해 블로깅을 해볼까 한다. 왜 리액트(React)가 등장했는가? 웹 사이트가 점점 커지면서 사용자와 인터렉션이 많아져 관리해야 할 DOM 역시 많아지게 되었다. 이러한 상태 관리를 최소화하면서 기능 개발에만 충실하기 위해서 리액트가 고안되기 시작하였고 지금의 리액트 라이브러리가 등장하게 되었다. 그럼 리액트는 무엇인가? React란 Component라는 개념에 집중하고 있는 JavaScript 프론트앤드 라이브러리이다. 여기서 Component란 기능 개발을 중심으로 사용하기 위해 나온 하나의 의미(기능)을 가진 독립적인 단위 모듈이다. Component를.. 2020. 11. 27. 이전 1 다음 반응형
