Front-end/React6 REACT 컴포넌트 생명 주기 Component Life Cycle ❗ Component Life Cycle을 공부하게 된 계기 리액트를 파다보니 마운트, 언마운트, 업데이트 등 한번에 와닿지 않는 개념들이 많더라. 그래서 정리하기로 결심했다 ! 📌 리액트의 Component Life Cycle 리액트는 UI 중심의 컴포넌트 기반 개발 언어이다. 컴포넌트로 시작해 컴포넌트로 끝낸다고 해도 과언이 아니다. 때문에 리액트에는 컴포넌트 관리 방법과 과정을 명시한 "Component Life Cycle"이 존재한다. 컴포넌트 렌더링 직전 or 직후 또는 컴포넌트 업데이트 전 or 후에 처리해야하는 작업들을 순서에 맞춰 실행시킬 수 있다. 📍 Rendering // HTML // // React DOM은 이 안에 들어가는 모든 엘리먼트들을 "관리"한다. // 는 root DOM .. 2021. 10. 1. styled-component, useState 사용해서 Tag 만들기를 가장한 testCase 삽질기 📌 Tag 란? 키워드 중심의 버튼버튼 아닙니다이라고 볼 수 있다. (정확히는 버튼은 아님. "버튼처럼" 동작할 뿐) 일반적인 버튼과의 차이가 있다면, 클릭했을 때 새로운 이벤트를 즉각적으로 실행하지 않는다. 버튼이 아니니까 당연한 이야기 ... 다만, 선택된 태그를 바탕으로 정보를 조합해 새로운 이벤트가 구성된다. ex. 핀터레스트에 처음 들어갔을 때 관심사 태그들을 클릭하면 내 피드가 태그 관련 이미지들로 채워진다. ex. 노션에서 노트를 작성하며 내가 원하는 태그들을 달아놓는다면, 나중에 해당 태그가 있는 노트들만 취합해 볼 수 있다. 📌 Tag를 구현해보자. ◾ Tag 상태만 추적할 때 export const Tag = () => { // dsfault 값은 넣어도 되고 안 넣어도 됨 const .. 2021. 9. 15. 항공편 검색창 만들면서 useEffect 공부하기 📌 구현 결과 📌 구현 과정 Main.js 📌 2021. 9. 7. React To Do List 만들면서 useState, useRef 공부하기 2021. 8. 26. React 좋아요 버튼 만들면서 state 공부 📌 구현 결과 📌 구현 과정 App.js ✔ /* eslint-disable */ npm 눌렀을 때 뜨는 노란 글씨 ( 오류는 아니지만 약한 경고 메세지 ) 를 지워주는 역할 ✔ 리액트는 데이터 바인딩이 굉장히 쉽다 데이터의 상태를 변화시키고 싶을 때, useState를 사용해 복사해 온 다음에 변경 사항을 적용시킨다. 절대 !! 원본 데이터는 직접 변경시키지 않는다. 꼭 복사해서 들고 올 것. // 01 const changeName = () => articleNameChange(["백엔드개발자" ,"자바스크립트", "리액트"]) // 02 const changeName = () => { const newArr = [...articleName]; newArr[0] = "백엔드개발자"; articleNa.. 2021. 8. 25. React 시작 📌 React? React는 UI 기능만 제공한다. 따라서, 전역 상태 관리, 라우팅, 빌드 시스템 등을 개발자가 직접 구축해야한다. --> 직접 만져보면서 이 특징을 여실히 느꼈다. 같은 기능을 구현하더라도수십 수백가지의 방법이 있더라. 그래서 React를 UI 라이브러리 혹은 라이브러리라고 부른다고 한다. 빌드 시스템이나 라우팅 등을 직접 구축하는 것은 진입장벽을 높히기 때문에 이를 허물고자 React측에서 CRA를 만들었다. (프레임워크는 이를 모두 구축해서 제공한다 ㅎㅎ) 📌 입문 필수 지식 ✔ 프레임워크(Frame-work) 와 라이브러리(Library) 차이 ✔ React CRA ? 보일러 플레이트 ? ✔ (그동안 몰랐던) Babel의 역할 ✔ 자바스크립트 모듈 간 import와 export를.. 2021. 8. 19. 이전 1 다음
