리액트8 [React] State State state는 데이터가 저장되는 곳으로 유동적인 데이터를 다루기 위한 객체이다. component 내에서만 정의 가능하며 값의 변경이 가능하다. 데이터가 변경될 때 업데이트하는 방법 1. render() 함수를 이용해서 UI를 새로고침(리렌더링) 컴포넌트 내 값의 변경이 있을 때 새로고침이 필요한 곳에 render() 함수 사용. -> 모든 코드가 재생성되는 단점이 있다. ReactDOM.render(,root); 2. useState() 함수 사용 React.useState() 함수를 통해 state를 사용한다. 함수형 컴포넌트에서 가변적인 상태 관리가 가능하다. const [state 변수, state값 변경 함수] = React.useState(state 초기값) useState 함수는 배.. 2022. 1. 27. [React] Component Componenet 컴포넌트란 리액트를 이루는 최소 단위, 하나의 의미를 가진 독립적인 단위 모듈로 사용자가 정의하여 HTML 태그와 비슷하게 사용된다. 컴포넌트를 이용하면 소프트웨어의 재사용성과 유지보수가 쉽다. 컴포넌트 사용 방법 버튼를 반환해주는 Btn 컴포넌트를 정의해보자. 단, 리액트에서 소문자로 시작하는 컴포넌트는 DOM태그로 인식하기 때문에 컴포넌트의 이름은 항상 대문자로 시작한다. 함수형 컴포넌트로 정의하는 방법 function Btn({text}){ return( {text} );} 클래스형 컴포넌트로 정의하는 방법 class Btn extends React.Component{ render(){ return( {text} ); } } 위에서 주황색 배경과 흰색 글자 스타일의 버튼 컴포넌트.. 2022. 1. 27. 이전 1 2 다음