JiSoo's Devlog

리액트 개발 도구 react-dev-tools→ 리액트로 만들어진 다양한 애플리케이션을 디버깅하기 위해 만들어졌고 리액트 웹뿐만 아니라 리액트 네이티브 등 다양한 플랫폼에서도 사용 가능 웹 개발 환경에서 이 개발 도구를 사용하는 가장 편리한 방법은 브라우저 확장 프로그램을 사용하는 것! 리액트 개발 도구 설치크롬, 파이어폭스, 엣지 브라우저를 지원하고 주로 개발하는 브라우저에 설치하면 된다위처럼 리액트 로고가 회색으로 표시되면 리액트 개발 도구가 정상적으로 접근할 수 없는 페이지이거나 리액트로 개발되지 않은 페이지라는 뜻이다리액트 로고가 빨간색으로 표시되면 개발 모드인 웹 애플리케이션에 정상적으로 리액트 개발 도구가 접근할 수 있다는 의미이다개발 모드가 아니더라도 실데 프로덕션에 배포돼 있는 웹 애플리케..

상태란 어떠한 의미를 지닌 값이며 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미웹 애플리케이션에서 상태로 분류될 수 있는 것들 ↓- UI- URL- 폼- 서버에서 가져온 값 tearing은 하나의 상태에 따라 서로 다른 결과물을 사용자에게 보여주는 현상을 말한다 Flux 패턴양방향이 아닌 단방향으로 데이터 흐름을 변경하는 것상태와 그 상태의 변경에 대한 흐름과 방식을 단방향으로 채택한 것이 특징 - 액션 : 어떤 작업을 처리할 액션과 그 액션 발생 시 함께 포함시킬 데이터를 의미- 디스패처 : 액션을 스토어에 보내는 역할, 콜백 함수 형태로 타입과 데이터 모두 스토어에 보낸다- 스토어 : 실제 상태에 따른 값과 상태를 변경할 수 있는 메서드를 가진다- 뷰 : 스토어에서 만들어진 데이..

싱글 페이지 애플리케이션렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식최초에 서버에서 최소한의 데이터를 불러온 이후부터는 이미 가지고 있는 자바스크립트 리소스와 브라우저 API를 기반으로 모든 작동이 이뤄진다최초에 로딩해야 할 리소스가 커지는 단점이 있지만 한번 로딩되면 이후 서버를 거쳐 필요한 리소스를 받아올 일이 적어져 사용자에게 훌륭한 UI/UX 제공 가능 전통적인 방식의 애플리케이션과거 서버 사이드에서 작동하던 애플리케이션은 페이지 전환이 발생할 때마다 새롭게 페이지를 요청하고 HTML 페이지를 다운로드해 파싱하는 작업을 거친다 웹페이지의 모든 영역(페이지 렌더링부터 사용자 인터랙션까지)을 담당하며 아우를 수 있는 싱글 페이지 렌더링이 인기를 얻었다과거..

함수 컴포넌트가 상태를 사용하거나 클래스 컴포넌트의 생명주기 메서드를 대체하는 등의 작업을 위해 훅이 추가됐다훅은 state, ref 등 리액트의 핵심 기능을 함수에서도 가능하게 만들었고 클래스 컴포넌트를 간결하게 작성할 수 있게 했다 useState함수 컴포넌트 내부에서 상태를 정의하고 이 상태를 관리할 수 있게 해주는 훅import { useState } from 'react'const [state, setState] = useState(초깃값)useState의 인수로는 state의 초깃값을 넘겨준다아무런 값을 넘겨주지 않으면 초깃값은 undefiend반환 값은 배열이고 첫 번째 원소로 state 값 자체, 두 번째 원소인 setState 함수로 state의 값을 변경할 수 있다 함수 컴포넌트는 매번..

JSXXML과 유사한 내장형 구문으로 자바스크립트 표준의 일부는 아니다반드시 트랜스파일러를 거쳐야 자바스크립트 런타임이 이해할 수 있는 의미 있는 자바스크립트 코드로 변환된다JSX가 주로 사용되는 곳은 리액트 내부에서 반환하는 html과 자바스크립트 코드이지만 한정돼 있는 것은 X ◦ JSXElementJSX를 구성하는 가장 기본 요소로 HTML의 요소와 비슷한 역할JSXElement가 되기 위해 JSXOpeningElement, JSXClosingElement, JSXSelfClosingElement, JSXFragment 중 하나여야 한다JSXElementName은 JSXElement의 요소 이름으로 쓸 수 있는 것을 의미한다// JSXIdentifierfunction Valid1() { retur..

React Query는 편리한 방식으로 데이터를 fetch 시킬 수 있다 npm i react-router-dom React RouterDom은 어플리케이션에 URL을 가질 수 있게 해 주고 기본적으로 각기 다른 화면을 갖도록 해준다 / -> All coins /:id -> /btc -> Coin Detail Nested router /btc/information /btc/chart Nested Router(중첩된 라우터)란 한 스크린 내에 또 다른 Router를 가질 수 있는 것 Switch는 한 번에 하나의 Route를 렌더링 할 수 있는 방법 Router에게 우리의 URL이 변숫값을 갖는다는 것을 말해주는 방식 import { useParams } from "react-router-dom"; int..

절대 state를 직접적으로 수정하지 않고 항상 수정하는 함수를 사용한다 food = [1, 2, 3, 4] [6, ...food] > [6, 1, 2, 3, 4] setToDos((currentArray) => [toDo, ...currentArray]); 수정하는 함수를 사용할 때 2가지 옵션이 있다 하나는 setToDo("") 이런 식으로 이 값은 우리가 저장한 데이터를 가지고 있다 다른 하나는 함수를 보내는 방법 map()은 괄호 안에 함수를 넣을 수 있는데 이 함수는 array의 모든 item에 대해 실행될 것이다 거기서 무엇을 return하던지 간에 그 return 한 값이 새로운 array에 들어가 있게 될 것이다 map은 함수의 첫번째 인자가 진행되고 있는 순서에 맞는 item이다 {toD..

npx create-react-app my-app cd my-app npm start create-react-app을 이용하면 자동 재실행이라는 장점이 있다 npm i prop-types PropTypes를 checking 하기 위해 PropTypes install create-react-app은 CSS코드를 javascript 오브젝트로 변환시켜 준다 CSS modules -> Button.module.css import styles from "./Button.module.css"; function Button({ text }) { return {text}; } create-react-app은 무작위적인 랜덤 class를 갖는다 동일한 class 이름을 다른 파일 내에서도 사용 가능 function A..

props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법 컴포넌트는 어떤 JSX를 반환하는 함수 ReactJS에서 스타일 적용하는 방법 중 가장 기본적으로 할 수 있는 방법은 태그 내의 style 변경하는 것 -> 이 방법이 최적 X 모든 컴포넌트들은 괄호로 인자를 받는데 이 인자 이름을 props라고 부른다 Btn({text:"Save Changes"}) 아래처럼 적은 게 위의 코드 같은 의미 ReactJS는 자동으로 우리가 넣은 모든 prop들을 object 안으로 집어넣고 오브젝트는 컴포넌트의 첫 번째 인자로 주어진다 props는 첫 번째이자 유일한 인자 function Btn(props) { console.log(props); return ( {props.text} );..

state는 기본적으로 데이터가 저장되는 곳 countUp을 호출할 때마다 ReactDOM.render부분을 다시 호출하고 싶은 것인데 먼저 애플리케이션이 시작될 때 Container를 렌더링 하고 우리가 Container를 렌더링 할 때 counter는 0 const root = document.getElementById("root"); let counter = 0; function countUp() { counter += 1; render(); } function render() { ReactDOM.render(, root); } function Container() { return ( Total clicks: {counter} Click me ); } render(); 우리가 해야 하는 건 Cont..