728x90 Frontend/React9 5. Hooks state와 Lifecycle은 Class Component에만 사용 가능하고, Function Component에서는 사용 불가하다. 이때 Function Component에서 이런 기능을 대신 지원하는 것이 바로 Hooks이다.참고로 Hooks의 모든 이름은 use로 시작한다. Hook 규칙1. Hook은 무조건 최상위 레벨에서만 호출해야 한다. -> 반복문이나 조건문 또는 중첩된 함수들 안에서 훅을 호출x -> Hook은 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 한다. 2. 리액트 함수 컴포넌트에서만 Hook을 호출해야 한다. cf) eslint-plugin-react-hooks -> 훅의 규칙을 따르도록 강제해주는 플러그인. -> 리액트 컴포넌트가 훅의 규.. 2024. 8. 1. 4. State, Lifecycle 1. State리액트 Component의 변경 가능한 데이터state는 개발자가 정의한다.렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다.JavaScript 객체state는 직접 수정할 수 없으며, 해서도 안 된다.변경을 원할 경우, setState 함수를 통해 수정해야 한다.class LikeButton extends React.Component { constructor(props) { super(props); this.state = { //현재 컴포넌트의 state를 정의하는 부분 liked: false }; } ...}// state를 직접 수정 (잘못된 사용법)this.state = { name: 'Inje'};// setState 함.. 2024. 7. 30. 3. Component, props 1. ComponentReact Component는 Function Component와 Class Component로 나뉜다. 최근에는 Function Component를 주로 사용하기 때문에 이를 중심적으로 살펴보고자 한다. Function Component컴포넌트는 데이터를 가진 props를 input으로 받아, output으로 element를 반환한다.그렇기 때문에 component가 화면에 렌더링 되지 않고, 출력된 element가 실제로 화면에 나타난다. cf) component의 이름은 항상 대문자로 시작해야 한다. - 예시하나의 props 객체를 받아서 인삿말이 담긴 element 리턴하는 componentfunction Welcome(props) { return 안녕, {props.nam.. 2024. 7. 29. 2. Element 정의Elements are the smallest building blocks of React apps.React의 Element는 React 앱을 구성하는 '요소'이다.(React) Element가 기술한 내용을 토대로, 실제 우리가 화면에서 보게 되는 DOM Element가 만들어진다.DOM Element : 실제 브라우저 DOM에 존재하는 ElementReact Element : 리액트 Virtual DOM에 존재하는 Element 형태Element는 자바스크립트 객체 형태로 존재한다.이 객체는 마음대로 변경할 수 없는 불변성을 갖는다.createElement : 객체를 만드는 함수 //기본형React.createElement( type, //DOM 노드인지, 아니면 컴포넌트 .. 2024. 7. 29. 이전 1 2 3 다음 728x90
