본문 바로가기

React15

[React] React Hook _ useState 리액트의 Hook이란?함수형 컴포넌트 내에서 state와 컴포넌트의 생명주기를 연동할 수 있게 해주는 자바스크립트 함수이다. 클래스 없이 리액트를 사용할 수 있게 해 준다. Hook 사용 규칙컴포넌트 최상단에서만 호출한다. 반복문, 조건문, 중첩 함수 내에서 호출하지 않는다.리액트 컴포넌트 함수 내에서만 호출해야 한다. 순수 자바스크립트 함수 내에서 호출하지 않는다.eslint-plugin-react-hooks라는 플러그인을 설치하면 규칙에 맞는지 자동으로 검사해 준다. CRA로 앱을 구성하였다면 해당 플러그인이 이미 포함되어 있다. useState컴포넌트 내에서 상태 변수를 관리하는 함수다. 상태 변수와 상태를 갱신하는 함수를 반환하며, useState에 전달된 첫 번째 인자(init)가 초기 상태.. 2023. 3. 9.
[React] React란? 리액트는 페이스북에서 개발한 오픈소스 자바스크립트 라이브러리이다. 기존의 웹 기술 HTML, CSS 등과 결합하여 사용할 수 있고, 자바스크립트만으로 뷰단을 개발할 수 있어 사용이 편리하다. 특징으로는 가상의 DOM을 활용하는 것과 컴포넌트 재사용성, 단방향 데이터 흐름 등이 있다. 가상의(Virtual) DOM은 사용자가 보고 있는 UI와 변경될 UI의 변경 사항을 체크하여 변경될 부분만 재조정할 수 있도록 메모리에 보관하고 있는 UI 사본이라고 할 수 있다. 변경된 부분만 재조정하기 때문에 불필요한 연산을 줄일 수 있다. 컴포넌트란 (공식 문서의 표현을 빌리자면) '작고 고립된 코드의 파편'이다. 하나의 화면을 구성할 때 여러 작은 컴포넌트를 섞어서 구성할 수 있고, 컴포넌트의 자식 컴포넌트를 생성하.. 2023. 2. 21.
엘리스 SW 3기 2차 프로젝트 - 1주차 22.12.12~22.12.18엘리스 2차 프로젝트 1주차 회고 프로젝트 기본 사항서비스 이름: TripMatch서비스 목적: 혼자 여행하고 싶지 않은 사용자를 연결해 주는 서비스 (국내 여행 위주)FE 기술 스택: React, Redux, TypeScript, Styled-Components협업 툴: Figma, GitLab, Notion (Jira > notion > gitlab 첫 주간 동안 협업을 하면서 팀의 협업 방식에 잘 맞는 툴로 변경했다.)유저 관련 기능: 회원가입, 로그인, 회원 탈퇴, 동행 신청, 동행 거절, 동행자 평가 등게시글 관련 기능: 동행 게시판, 자유게시판 글 작성/수정/삭제, 공공 데이터 축제 정보 제공관리자 관련 기능: 글 삭제, 회원 탈퇴 내 담당은 홈페이지, 관리자 페.. 2022. 12. 20.
비전곰VisionBear 스터디 1차 프로젝트 - 6일차~절반의 마무리 역시 프로젝트 후기는 프로젝트 마감하고 며칠 지나 써줘야 제맛이지😋엘리스 스터디 발표가 있어 기한 안에 최대한 기본적인 기능들을 구현하는 것으로 목표를 잡았다.내가 담당했던 부분은 모두 구현하긴 했다.헤더, 헤더의 로그인 여부에 따른 변화, 푸터홈페이지모든 컨텐츠 페이지의 페이지네이션과 정렬 기능(시간순, 댓글순)모든 컨텐츠 페이지를 내 컨텐츠 페이지로도 활용'구현하긴 했다'라고 표현한 것은 에러가 일부 있는 부분을 억지스러운 코드로 구현했기 때문이다.헤더와 푸터 컴포넌트를 본문 컴포넌트와 완전히 분리하여 구성하여 로그인 이후 홈으로 전환 시 헤더 컴포넌트가 리렌더링 되지 않아 헤더의 네비 부분이 비회원 네비로 노출되었다. 웹 자체를 리로드 하면 회원 네비가 노출되기에, 급하게 로그인 컴포넌트에다가 리.. 2022. 12. 5.
비전곰VisionBear 스터디 1차 프로젝트 - 1~5일차 엘리스 1차 스터디로 만난 비전공자 동료들과 함께 2차 프로젝트가 시작하기 전에 토이 프로젝트를 하나 진행해 보기로 했다. 개발할 아이템은 독서기록을 공유하는 웹 사이트! 'Book극곰' : 독서 기록을 웹에 올려 다른 사람들과 의견을 공유하고 자신의 독서 기록도 되돌아볼 수 있는 서비스.프론트 기술 스택: React, jsx, styled-components아직 관리자 기능을 만들 계획은 없어서 우선 사용자 기능 위주로 기획했다.회원가입, 회원 탈퇴, 개인정보 수정전체 글 보기, 내 글 보기게시글 작성, 게시글 수정, 게시글 삭제, 게시글 열람댓글 작성, 댓글 조회, 댓글 수정, 댓글 삭제내가 담당한 부분은 홈페이지와 내 글 보기 페이지.리액트는 아직 엘리스 진도도 안 끝났고, 다들 처음이라 프로젝트 .. 2022. 11. 25.

티스토리툴바