728x90 반응형 SMALL 리액트13 React의 state와 props React는 상태(state)와 속성(props)이라는 두 가지 개념을 중심으로 구성된 JavaScript 라이브러리다. props 와 state 는 React 에서 데이터를 다룰 때 사용하는 개념이다. State(상태) React 컴포넌트에서 state는 컴포넌트 내부에서 관리되는 값으로서 변경 가능하다. 이 값은 컴포넌트가 렌더링되는 동안 변할 수 있으며, 변경될 때마다 컴포넌트가 다시 렌더링된다. 즉, React에서 state는 컴포넌트 내에서 관리되는 상태 데이터이며, 컴포넌트 내부에서 변경할 수 있고, 컴포넌트의 렌더링 결과를 결정한다. State 사용 방법 1. State 초기화하기 import React, { Component } from 'react'; class Counter extend.. 2023. 4. 5. 컴포넌트의 라이프사이클 메서드 리액트 컴포넌트에는 라이프사이클(Lifecycle)이 있다. 클래스형 컴포넌트에서만 라이프사이클 메서드를 사용할 수 있다. 라이프 사이클은 마운트, 업데이트, 언마운트 세 가지로 나눈다. 마운트(Mounting) DOM이 생성되고 웹 브라우저상에 나타나는 것 업데이트(Updating) 1. props가 바뀔 때 2. state가 바뀔 때 3. 부모 컴포넌트가 리렌더링될 때 4. this.forceUpdate로 강제로 렌더링을 트리거할 때 이 네가지 경우에 컴포넌트를 업데이트한다. 언마운트(Unmounting) 컴포넌트를 DOM에서 제거하는 것 라이프사이클 메서드 마운트 - constructor: 컴포넌트 생성자 메서드, 초기 state 정할 수 있음 - getDerivedStateFromProps: pr.. 2023. 1. 4. React에서 상태관리를 왜 할까? 상태(state)란? 상태관리를 왜 하는지 알아보기전, 상태가 무엇인지 알고 있어야 한다. 오늘날 웹 어플리케이션에서 상태는 동적이면서, 렌더링에 영향을 주는 값이라고 할 수 있다. 리액트 공식 문서 참고 Plain Javascript Object hold information influences the output of render 리액트는 그 자체 만으로도 상태를 관리할 수 있는 수단을 제공한다. 예를 들어서, useState, useReducer, Context API 등 그래서 서드 파티 라이브러리(제 3자 라이브러리)를 도입해서 상태를 관리할 때는, 라이브러리가 쓰여야하는 명확한 이유와 그 쓰임새에 대해 생각해보아야한다. 상태관리를 왜 할까? 리액트는 가상돔을 이용한다. 컴포넌트가 변화할 때 리.. 2022. 10. 18. 2022.08.10 / Todolist 수정하고, 배포하기 아직은 덜 수정된 상황이지만, 일단 기본 구현은 다 해놨고, 추가 기능 구현 몇개만 더 하면 끝난다. 배포하는 건 vercel과 heroku를 사용해서 배포하는 것이 요구사항이다. 하지만 학습자료에 나와있는건 버전이 다른 버전이라... 똑같이 해도 에러가 뜬다..... 그래서 우리 팀 조장이 매우 힘들어했다ㅠㅠ 결국엔 구글링해서 찾아서 거의 5시간만에 하는 방법을 찾아 배포를 했다. 배포를 하고나니까 코드를 수정할때 모든 코드를 팀장의 레포로 보내야하고... 그렇게 해야 서버가 잘 작동한다 오늘 내가 뭘 한건가 싶은 날이었던거 같다 뭔가 했는데 뭘했는지 모르게 시간이 금방 지나간 하루였다 내일은 1. 디테일에서 이전으로 색깔 오렌지로 바꾸기 2. 코멘트에서 추가하기 버튼 위치 안맞는 거 바꾸기 3. 코멘.. 2022. 8. 11. 8월 1주차 WIL - 라이프사이클, React hooks 이번주에 배운 내용은 LifeCycle과 리액트 hooks에 관한 내용이다. 라이프사이클(클래스형 vs 함수형), React hooks 리액트의 컴포넌트는 라이프 사이클을 가진다. 예전에는 라이프 사이클을 관리하기 위해서 주로 클래스형 컴포넌트를 사용했다. 현재는 리액트팀에서 함수형 컴포넌트로 바꾸라고 하는 추세다. 함수형 컴포넌트에서는 LifeCycle의 기능을 가지고 있는 React Hook을 사용한다. 하지만, 아직도 클래스형 컴포넌트를 사용하는 기업들이 있으므로, 유지보수를 위해 클래스형 컴포넌트에 대해 알고 있어야한다. 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { const na.. 2022. 8. 7. About Redux 1. 리덕스가 필요한 이유 (1) useState의 불편함 어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자 할 때 Props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내주었다. 근데 Props로 State를 공유하는 방법에는 불편한 점이 있다. 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야 한다. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 한다. 즉, 정작 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것을 의미한다. (조부모 → 부모 → 손자) 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다. 이러한 불편함 겪지 않기 위해 새로운 도구인.. 2022. 8. 5. 이전 1 2 3 다음 728x90 반응형 LIST
