본문 바로가기

내마음대로만들어보자/React58

State 관리 - 함수형 컴포넌트 함수형 컴포넌트에서 state 관리 - useState() 함수형 컴포넌트에서는 state가 없으므로, react hook 을 사용하면 state를 가질 수 있다. 네모칸 만드는 예제를 통해 사용방법에 대해 알아보자. 1. Nemo 컴포넌트 만들기 - 함수형컴포넌트 기본형태 2. App.js 에 불러다가 쓸수있도록 임포트 해줍니다. 3. useState()로 count를 state로 등록 4. 반환할 리액트 요소를 만들자 Array.from() 함수는 어떠한 길이 만큼의 배열을 만들어주는 함수이다. 네모를 만들기위해서 인덱스 값을 에로우 함수로 넘겨준다고 생각하면된다. 5. 함수를 만들어서 연결하기 까지! 클래스형 컴포넌트와는 작성 방법 및 형태등이 다르다보니, 익숙해져보자. if문 대신 삼항연산자도 유.. 2021. 7. 15.
State 관리 - 클래스형 컴포넌트 1. 단방향 데이터 흐름이란? 이말은 데이터는 위에서 아래로 넘겨줘야한다. (부모 → 자식) 예를들어, state가 업데이트되면 부모에서 자식 컴포넌트로 리랜더링 된다. 만약에 자식 컴포넌트의 state가 업데이트되서 부모 컴포넌트가 props를 받는다고하면 다시 자식컴포넌트로 리랜더링 될거다. 이렇게되면은 데이터 흐름상 불필요한 과정들이 많아지기떄문에 데이터는 단방향으로 넘겨줘야한다. 2. 클래스형 컴포넌트에서 state 관리 - setState() 클래스형 컴포넌트의 state를 업데이트 할떄 사용하는게 setState() 함수다. 위와같이 간단한 예제를 통해서 state를 어떻게 관리하는지에 대해 알아보자! ※ 실습 순서 1. 새로운 CRA 만들어 실습해보자. → yarn create react-a.. 2021. 7. 15.
리액트에서 돔요소를 가져오는 방법 (Ref) 예를들어, 어떤 인풋박스에서 텍스트를 가져오고싶을경우 "리액트 요소"에서 가져와서 사용한다. React 요소를 가지고 오는 방법 React.createRef() import React from "react"; import logo from "./logo.svg"; // BucketList 컴포넌트를 import // import [컴포넌트 명] from [컴포넌트가 있는 파일경로]; import BucketList from "./BucketList"; import styled from "styled-components"; // 클래스형 컴포넌트 형태! class App extends React.Component { constructor(props) { super(props); // App 컴포넌트의 st.. 2021. 7. 13.
라이프사이클 라이프사이클에 대해서 알아보기전에 "가상돔"에서 대해서 먼저 알아보자! 1. DOM이란? DOM은 html 단위 하나하나를 객체로 생각한다. 예를 들면, 'div태그'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있는데 이런 구조를 트리 구조 라 한다. DOM 트리 구조 중, 어느하나가 수정되면, 그럴때마다 모든 DOM을 뒤지고 수정을 한다면 필요없는 연산이 많아진다. 그러한 과부하를 방지하기위해 "가상돔"을 사용한다. 2. 가상돔이란? 메모리에서 돌아가는 가자 DOM이라고 생각하면된다. ※ 동작방식 : 기존 DOM과 어떤 행동이 이루어진 이후 새로 그린 DOM(가상돔에 올라갔다고 표현) 을 비교해서 바뀐 부분만 갈아끼워준다. → DOM은 "페이지를 처음 진입했을떄" , "데이터가.. 2021. 7. 12.

티스토리툴바