React

📌 React는 무엇을 도와주는가? 왜 사용하는가? >### React는 UI를 interative 하게 만들어준다. 전체 프로그램 설계를 깔끔하고 일관성 있게 정리할 수 있는 조직성(organization)이 강함 미리 만들어 놓은 조각을 다시 사용할 수 있어

state : 데이터가 저장되는 곳 바닐라JS는 데이터가 바뀔 때마다 전체를 업데이트하지만, React는 바뀐 부분만 인지해서 업데이트 함. 핵심: 데이터(state)가 바뀔 때마다 React가 바뀐 값을 가진 컴포넌트를 리렌더링 하고 UI를 refresh한다. J

props : 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법. 필요한 상황 : 중복되는 디자인의 여러 버튼 생성(저장 버튼, 삭제 버튼, 수정 버튼 등) -> 컴포넌트를 하나만 만들어서 재사용하고 텍스트를 다르게 활용. 다르게 설정한 pro

state가 변화하면 모든 component가 Re render된다. Re render 될 때마다 코드를 다시 실행하지 않고, 처음 render 될 때만 코드 실행하고 싶음. ex. API 불러올 때 : 처음 한번만 불러오면 됨. state가 변화할 때마다 다시 가져올

페이지 전환을 위해 필요함. Router 종류 Browser Router : 보통의 웹사이트처럼 생겼음. Hash Router보다 자주 사용함. Hash Router : 뒤에 # 등을 붙임. 형태 path로 주소 경로 설정할 수 있음. / 는 현재 페이지 그 뒤

시작 전 참고 영상 React Hooks가 무엇인가? https://www.youtube.com/watch?v=yS-BU6eYUDE React Hooks 사용 예시 https://www.youtube.com/watch?v=sZDvByH2mNU 📌 React Hook

Router setup react-router-dom 설치 Router.js에 import Router 하기 path = "경로", element = {} Router.js 폴더 구성 >참고 : Fragment `` 많은 요소들을 render 하고 싶을 때 사

모든 코드를 컴포넌트 라는 작은 단위로 쪼개고, 이들을 조합하여 사이트를 구성한다. 만들어둔 기능을 재사용할 때 코드들을 전부 복사&붙여넣기할 필요없이 그냥 컴포넌트들을 import 해서 사용하면 되기 때문에 매우 용이하다.(React 뿐만 아니라 Angular, Vu

React를 사용하려면 React와 ReactDOM이라는 라이브러리가 필요하다.React : UI를 만들기 위한 라이브러리ReactDOM : UI를 실제로 브라우저에 렌더링 할 때 사용하는 라이브러리.(실제 HTML 요소를 화면에 불러옴)참고 | react dom에 대

📌 React Router 페이지 이동을 도와주는 라이브러리 정확히는 페이지를 이동하는 것이 아니라 같은 페이지에서 Router를 이용해 다른 컴포넌트들을 보여주는 것 뿐임. 설치 >버전 업그레이드 되면서 바뀌는 부분들은 React Router 사이트에서 확인하

React Context API는 React에 내장된 상태 관리 솔루션이다. Redux는 외부 라이브러리로, Context API와 유사한 역할을 한다. Redux를 이해하기 위해 먼저 Reducer가 뭔지 알아보아야 한다. Reducer는 상태 관리를 위한 "패턴"이

앱으로 직접 데이터를 가져오거나 저장하고 연결을 맺는 행위는 외부 환경에서는 절대 하면 안되는 일 중 하나이다.코드를 통해 데이터베이스의 인증 정보를 노출시키는 행위이기 때문이다.\-> 보안 이슈 발생따라서 리액트 앱 코드 내부에서 데이터베이스에 직접적으로 통신하는 대

component : 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위를 말한다. 생명주기 함수 생명주기 : component의 생성, 변경, 소멸 과정을 뜻한다. 생성 : render(), constructor(), getDeriv

props 사용하기 props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용한다. props를 전달받은 자식 컴포넌트에서는 데이터를 수정할 수 없다. props 자료형 선언하기 자식 컴포넌트에서 props에 대한 자료형을 선언해 놓으면, 부모 컴포넌트에서

📌 이벤트 사용하기 >#### ⭐️ react에서는 html과 달리 이벤트에 camelCase를 사용한다. html에서는 onclick 이라고 나타냈지만 react에서는 onClick 이라고 쓴다. 1. onClick onClick 이벤트는 특정 element가 클

📌 서울시 유동 인구 데이터 사용하기 - 리스트 페이지 만들기 하드코딩 📌 서울시 유동 인구 데이터 사용하기 - axios로 api 호출하기 axios의 get 메소드를 이용해 아래 주소에 있는 데이터를 가져온다. >http://3.39.18.171:5001/

react에서 create-react-app을 설치해 front-end 서버를 간편하게 구동했던 것처럼 node에서는 express를 사용하면 back-end 서버 구현을 쉽게 할 수 있다.프론트엔드 서버는 client 폴더에 모두 담아둔다.위에서 설치를 마치면 nod

React.memo: 의존하는 상태가 없는 변수가 불필요하게 렌더링 되는 것 막음.useMemo: 함수가 불필요하게 렌더링되는 것 막음. 특정 함수의 결과값을 저장하고, 해당 값이 변경되지 않으면 이전에 계산된 값을 재사용한다. (값을 기억함) 이를 통해 동일한 계산을

state를 업데이트 하려고 할 때 이전 상태에 의존하고 있으면 그 내용이 대체될 수 있으므로 이전 상태를 유지하면서 바뀐 부분만 수정되게 해야 한다.두 가지 방식이 있는데 두 번째 방식이 더 좋다. 항상 최신 상태의 스냅샷에서 작업할 수 있도록 하는 좀 더 안전한 방

리다이렉트 주소를 서버가 아닌 클라이언트로! 서버로 되어 있으면 클라이언트에서 code를 받을 수가 없다.

회원가입시에 아래와 같이 유효성 검사를 진행했다.닉네임 길이가 2 이상이어야 한다.기존 닉네임과 중복되지 않아야 한다.입력창이 focus 되어 있을 때에만 경고창이 뜨도록 한다.아무것도 입력하지 않고 버튼을 눌렀을 때는 입력창이 focus되고, 2글자 이상 입력하라는

로그인 상태에 따라 접근 제한 기능을 구현하고자 했다.: 시작 페이지, 로그인 페이지, 로딩 페이지, 빈 페이지: 나머지 모든 페이지로그인 시에 localstorage에 access token을 저장하도록 설정해두었기 때문에 만약 localstorage에 토큰이 있다면

토큰이 만료되었을 경우 토큰 재발급을 위한 모달창이 뜨도록 만들었다.재발급 버튼을 누르면 현재 access token을 담아 백엔드로 post 요청을 보낸다.토큰이 성공적으로 발급된 경우 localStorage에 새로운 토큰을 다시 저장하고 토큰 만료여부도 false로