유자맛바나나의 Dev-log

❑ Situation: 최초 Page 랜딩 시 서버로부터 받은 데이터를 state에 초기화하고 싶다 네이버 웹 페이지에 가면 내가 접속한 그 때 웹 페이지에 보여줄 데이터들을 서버로부터 받아 보여준다. 내가 원하는 것도 최초 Page 오픈 시 Axios를 이용해 서버로부터 데이터를 받아 state에 초기화하고, 해당 state를 화면에 보여주는 것이다. 참고로, Problem1에서 살펴 보겠지만 Axios를 이용해 서버로부터 받은 결과는 Promise다. 따라서 본 포스팅은 최초 Page 랜딩 시 Promise의 데이터를 state에 초기화하는 방법(useEffect를 활용)으로 이해해도 좋다. [Basic knowledge] 함수형 컴포넌트의 state의 초기화 방법 기본적으로 함수형 컴포넌트의 sta..

Question1 상황 아래와 같이 React Router를 이용해 "/path"로 이동하도록 작성한 버튼1을 클릭하면 웹브라우저의 URI에 /path가 추가되며 해당 페이지(컴포넌트)로 이동한다. 여기서 궁금한 점, 그림2처럼 동일한 경로(/path)로 웹서버에 요청하는 버튼을 만들면 될까? Path Page로 이동할까? 아니면 웹 서버에 요청하게 될까? 각 버튼에 작성된 코드 버튼1: React Router를 이용해 "/path" 경로의 페이지로 이동 버튼2: 웹서버 Nginx에게 "/path" 경로로 요청 정답 버튼 1을 클릭할 경우: "/path" 경로의 페이지(컴포넌트)로 이동한다 버튼 2를 클릭할 경우: "/path" 경로(URI)로 웹서버(Nginx)에게 요청한다 어떻게 같은 경로(/path..

React App Build 1. 개발 PC에서 Build 1.1. React App Build create-react-app으로 생성한 React 프로젝트는 webpack 번들러로 빌드 결과물을 생성한다. 터미널에서 React 프로젝트 디렉토리로 이동 후 아래 명령어를 입력한다 npm run build 1.2. Build 확인 build가 완료되면 프로젝트 디렉토리에 build가 추가된다. index.html을 보면 들여쓰기와 띄어쓰기가 전혀 되어 있지 않은데, 웹 브라우저는 들여쓰기와 띄어쓰기가 없어도 구분할 수 있기 때문에 용량 최소화를 위해 전부 제거된 상태인 것이다. 1.3. Git Push React App을 Build하는 곳을 Server PC에서 할 수 있다. 그렇게 하려면 npm을 설치해..

React에서 페이지를 이동할 땐 태그가 아닌 태그를 사용한다 태그의 href 속성을 사용할 경우 href 속성을 사용할 경우 HTML을 새롭게 불러오게 된다. 따라서 React의 state(상태)값과 렌더링 된 컴포넌트가 전부 초기화 된다. 이러한 방식은 서버에 새로운 HTML을 요청해 속도가 느릴 뿐 아니라, 단일 URL로 SPA(Single Page Application)로 사이트를 표현하는 React의 방식과 대치된다. 태그의 to 속성을 사용할 경우 React에서는 태그의 문제점을 보완할 수 있도록 react-router-dom 라이브러리의 컴포넌트를 통해 페이지 이동을 하도록 지원한다. 를 사용할 경우 HTML을 초기화하지 않고 페이지를 이동할 수 있다. 예시 App.js react-route..

1. JSX 내에서 Javascript 사용 하는 방법: { } JSX 내에서 {}를 쓰면 Javascript로 해석한다. 따라서 조건문과 반복문 모두 { } 기호를 이용해야 한다. 2. 조건문(if) JSX에서는 중괄호 안에 if문을 직접적으로 사용할 수 없다. 단, 함수로 작성하여 사용 가능하다. 2.1. 외부 함수를 이용 Example Code import React from "react"; const useIf = (i) => { let result; if(i==1){ result = citron } else { result = banana } return result; } const App = () => { const hello = "Welcome to Citron Banana Blog!" re..

개념 JSX는 컴포넌트 간 속성(매개변수)을 전달할 때는 props(properties)라는 개념을 사용한다. 문법 주의: 넘겨 받은 props(속성값)은 read-only 이므로 값을 수정하고 싶다면 반드시 새로운 state에 할당한 후 사용한다(예시3) ... 예시1: Object로 묶어서 전달 App 컴포넌트에서 TestComponent 컴포넌트로 myProp1="citron", myProp2="banana" 속성값을 넘겨줌 예시2: 속성 각각 전달 에서 작성된 속성명(myProp1, myProp2)과 TestComponent.js에서 작성된 매개변수의 이름이 일치해야 한다 TestComponent.js에서 받고싶은 속성명만 명시해도 된다 예) {myProp1, myProp2} → {myProp1}..

State 1. 정의와 개념 state란 지속적으로 상태를 관리할 수 있는 변수를 의미한다. 기존 JavaScript의 let, const로 선언한 변수는 화면이 Re-rendering 될 때 그 값이 초기화 되었지만, state로 선언된 변수는 React가 관리하기 때문에 화면이 Re-rendering 되어도 값이 계속 유지된다. state는 컴포넌트 안에서 관리되며, 컴포넌트는 state의 값이 바뀔 때 마다 화면을 Re-rendering 한다. 2. state 사용의 차이: 함수형 컴포넌트 vs 클래스 컴포넌트 결론부터 말하자면 React 공식 문서에서 함수형 컴포넌트와 useState(React Hook)을 사용할 것을 권장한다. 개념적으로 React 컴포넌트는 항상 함수에 더 가깝습니다. Hoo..

export와 export default의 차이 1. export export만 사용한 컴포넌트의 경우 import 할 때 각 컴포넌트를 직접 명시해줘야 한다. Box.js export default를 사용하지 않고 export로만 세 가지 컴포넌트를 정의함 export const RedBox = () => { return Red Box; }; export const GreenBox = () => { return Green Box; }; export const BlueBox = () => { return Blue Box; }; App.js Box.js의 각 컴포넌트를 import 할 때 컴포넌트 명을 {}안에 정확히 명시해주어야 한다. as를 이용해 alias를 지정할 수 있다. import React ..

사전에 필요한 것 1. node.js 웹사이트에서 다운받아 설치 2. npm node.js 설치시 자동 설치 3. npx npm install npx -g 4. Visual Studio Code 최신 버전 설치하기 https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and..