Web Service/React34 [기본 개념] #2. Hooks & Rendering 단골개념인 Hooks에 대해 정리해 보자 Hooks는 리액트 v16.8에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. 또한, 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다. 1. Hooks 1) useState useState는 가장 기본적인 Hooks으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해 준다. 2) useEffect 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hooks이다. 2. Ren.. 2023. 11. 24. [기본 개념] #1. props 들어가기 앞서 리액트는 어쩌다 만들어졌을까? 흥미로운 주제, 못 참죠? DOM? 문서 객체모델, 웹페이지의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 기존의 HTML로 구성한 UI를 제어하면, DOM을 변형시키기 위해서 속성을 바꾸어 주어야 한다. 즉 관리가 힘들어진다. -> 리액트는 어떤 상태가 바뀌었을 때 상태에 따라 DOM을 어떻게 업데이트할지 규칙을 정하는 것이 아니라, 다 날려버리고 처음부터 모든 걸 새로 만들어서 보여준다면 어떨까?라는 아이디어에서 개발이 시작되었다. -> 리액트에서는 Virtual DOM이라는 것을 사용해서 이것을 가능하게 했다. Virtual Dom? 실제.. 2023. 11. 23. [기본 개념] React의 생명 주기 안드도 생명 주기 정리했으니까 리액트 생명 주기 정리 시작~~ React 컴포넌트는 생명 주기가 있다. 생애 주기 혹은 라이프사이클이라고 많이 표현하는데, 컴포넌트가 실행되거나 업데이트되거나 제거될 때 특정한 이벤트들이 발생한다. 클래스형 컴포넌트를 쓸 때 발생하는데 이거 잘 안 쓰기 때문에 그냥 이런 게 있다 정도만 알아두기! 1. 마운트 1) constructor 컴포넌트의 생성자 메서드로, 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드이다. constructor(props) { super(props); console.log("constructor"); } 2) getDerivedSteteFromProps props로 받아온 것을 state에 넣어주고 싶을 때 사용한다. static getDeriv.. 2023. 11. 22. [Realtime Database] Setting ~ 아두이노랑 연결하는 프로젝트 시 Realtime Database를 써야 할 때가 있어서 이번 기회를 통해 익혀보고자 한다. ~ 리액트 초기 세팅은 평소대로 해두기. 콘솔로가서 프로젝트 추가까지도 똑같음. 앱을 클릭한 후 톱니바퀴를 누른다. 밑에 내리면, SDK 설정 및 구성-> firebaseConfig의 코드를 fbase추가 후 코드 추가하기. 이건 늘 하던 대로. env로 하면 된다. (databaseURL도 env로 하고 싶은데,,,,,, 그럼 프로젝트 실행할 때 오류가 생긴다.... 그 이유를 아는 사람.... 댓글로 알려주세요.... url로 접속해봤자 아무것도 할 수 있는 거 없으니까 괜찮겠지.....) 사용하는 것만 우선 등록함 realtime database를 사용해야하니 databas.. 2023. 5. 17. [실전형 리액트 Hooks] #1. INTRODUCTION 그동안 너무 리액트 공부를 하지 않아서 해커톤 전에 잠깐 하려고 한다! 리액트 hooks의 숨겨진 이론에 대해서 알아보고자 한다. usestate와 useeffect와 같은 숨겨진 이론을 연습할수 있는 기회가 될 것이다. hooks library를 build하고자 한다. 만든 hooks를 넣어서 npm에 넣어서 다른 사람들이 사용할 수 있도록 하자. 강의를 이해하고 hooks의 강점을 알기 위해서는 리액트를 알고 있어야 한다. setstate와 props 등을 알고 있어야 hooks가 훌륭한 이유를 알 수 있을 것이다. 전부 리액트와 node이므로 npm이나 yarn을 이용해서 설치하도록 한다. npm을 설치해야 패키지를 publish할 수 있다. 그런데 이걸 hooks를 자동으로 테스트할 수 있게 하고.. 2023. 1. 11. [트위터 클론 코딩] #9. Finishing up! ~6.5까지의 강의. 끝 ! 이제 코드를 정리해보자. 먼저. Home에 있는 form을 NweetFactory를 만들어 정리한다. Home.js 더보기 import React,{useState, useEffect } from "react"; import { dbService, storageService } from "fbase"; import Nweet from "components/Nweet"; import NweetFactory from "components/NweetFactory"; const Home = ({ userObj }) => { const [nweets, setNweets] = useState([]); useEffect(() => { dbService.collection("nweets").. 2022. 5. 6. 이전 1 2 3 4 ··· 6 다음
