Step-by-Step

https://reactrouter.com/docs/en/v6/api#useroutes React Router | API Reference Declarative routing for React apps at any scale reactrouter.com React-router-dom이 v5에서 v6으로 업그레이드 되었다 새로운 버전을 사용하면서 기능들을 매번 찾아보기 힘드니까 공식문서와 여러 검색을 통해 정리해야겠다 사용해본 기능들 위주로 정리하고, 하나씩 추가 예정이다 (※ 참조한 문서들은 아래에 표시) [설치] $ npm install react-router-dom # or, for a React Native app $ npm install react-router-native 1. Switch 대신 ..

Redux의 필요성을 깨닫고 Redux를 사용하려고 유튜브에 강의를 쳐 보았다! 항상 무엇이든 시작하기 전에 생활코딩님의 강의를 먼저 듣곤 했는데 이번에도 있었다 Redux에서 꼭 알아야 할 개념인 store, action, reducer, dispatch, subscribe 등 기능들이 어떤 방식으로 진행되는지에 대해 잘 설명해주셨고 충분히 이해하게 되었다 생활코딩 역시 개념은 정말정말 잘 가르쳐주신다 (완전 명강) 하지만 이 강의에서는 redux를 직접 설치하는게 아니라 script 소스 형태로 가져와 사용하였으며 하나의 html 내부에서 작성하였기 때문에 컴포넌트 분리를 해야 하는 입장으로서는 다시 공부를 해야했다 따라서 redux와 typescript를 이용하여 프로젝트를 진행하려는 나로서는 개발..

Redux 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 개별 컴포넌트들이 각각 상태를 공유할 때 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달도록 함 Redux의 핵심 기능 State : 데이터의 집합 Store : state를 관리하는 장소로 객체 형식으로 저장 Dispatch : reducer를 불러 현재 state에 action을 넘겨줌 Reducer : dispatch로부터 action을 전달받아 state 변경 Action : state 변경을 일으키는 객체 형식의 정적 데이터 Subscribe : store 변경이 발생할때마다 dispatch 호출할 리스너 등록 Redux 사용이유 Redux는 Store라는 이름의 전역 자바스크립트 변수를 통해 관리 Redux를 사용하면 컴포넌트 간..

※ 이 게시물은 React만 설명하는 것이 아니라 강좌를 듣고 공부한 내용을 기록하는 글이다 CRUD 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능 4가지를 일컫는 말 CRUD : Create(생성), Read(읽기), Update(갱신), Delete(삭제) React Lifecycle React 컴포넌트는 생명주기(Lifecycle)을 가진다 Lifecycle : 컴포넌트가 생성되고 사용되고 소멸될 때까지의 일련의 과정 LifeCycle Event : 생명주기 안에서 특정 시점에 자동으로 호출되는 메소드 form 태그 속성 action : 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL 명시 method : 폼 데이터(form data)가 서버로 제출될 때..

※ 이 게시물은 React만 설명하는 것이 아니라 강좌를 듣고 공부한 내용을 기록하는 글이다 Props와 State 컴포넌트 간에 데이터를 주고 받는 방식에는 props와 state 두 가지가 있다 둘 다 Render라는 함수를 호출하여 사용한다 1. props : 상위 컴포넌트 → 하위 컴포넌트 로 값 전달 / 수정 2. event : 하위 컴포넌트 → 상위 컴포넌트 로 값 전달 / 수정 debugger 스크립트 내에 debugger 명령어를 적어주면 중단점을 설정한 것과 같은 효과를 본다 크롬 개발자 도구를 사용할 때 debugger로 되어 있는 부분에서 실행을 멈추고 기다린다 아래 링크 설명을 보면 예제가 나와있으니 참고하면 된다 https://ko.javascript.info/debugging-c..

※ 이 게시물은 React만 설명하는 것이 아니라 강좌를 듣고 공부한 내용을 기록하는 글이다 React 컴포넌트 기능 1. 가독성 : 컴포넌트 사용 2. 재사용성 : 컴포넌트를 한 번 정의해놓으면 다른 곳에서도 사용 가능 3. 유지보수 : 컴포넌트를 바꾸면 해당 컴포넌트를 사용하는 모든 곳에서 변경 개발 순서 1. coding : 코딩 2. run : 실행 3. deploy : 서비스를 사용하는 소비자에게 전달 설치 방법 React 설치 방법에는 크게 두 가지가 있다 1. npm 이용 npm install -g create-react-app 이 방법은 한 번 다운로드를 받고 이후 추가적인 다운로드가 필요 없는 편리함이 있으나 최신 버전 갱신이 안 된다 2. npx 이용 npx create-react-ap..

React를 사용하기 위해 강의를 알아보던 도중에 생활코딩님께서 올리신 강의를 발견하였다 학교에서 웹 기술을 배우기 전에 생활코딩님이 올려주셨던 강의를 보았었는데, 그 당시 강의력도 너무 좋고 영상이 많지만 길이가 짧아서 집중이 잘 되었던 기억이 난다 정말정말 도움이 많이 되어서 이번에도 듣게 되었다! 이번에는 강의를 들으면서 배운 것을 메모장에 적어 놓았고, 여기에도 올리기로 하였다 강의는 밑으로 가면 볼 수 있다! 무료이다 https://opentutorials.org/module/4058 React 수업소개 리액트 입문 수업입니다. 이 수업에서는 아래와 같은 내용을 다루고 있습니다. 리액트를 사용하는 이유 리액트의 컴포넌트를 만드는 법 리액트와 불변(immutable)의 관계 아래 내용은 opent..

ReactJs React는 View, 즉 사용자 인터페이스(UI)를 효과적으로 구축하기 위해 사용하는 자바스크립트 기반 라이브러리 React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI로직과 연결됨 React는 페이스북에서 개발하였음 ReactJs 특징 1. 선언적 (Declarative) React는 선언형 성격에 맞게 컴포넌트를 얻기 위해 JSX(JavaScript XML) 문법을 통해 구현 ※ JSX는 아래에서 다시 설명 2. 컴포넌트 기반 (Component-Based) 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만들어 이를 조합하여 UI를 개발할 수 있음 컴포넌트 로직은 템플릿이 아닌 J..