본문 바로가기

분류 전체보기32

state의 정의 및 사용방법 리액트에서의 state 정의 및 사용방법 일반 자바스크립트에서는 데이터를 저장하기 위해 let 변수이름 = '데이터'; 라는 식으로 변수에 데이터를 저장했었다. 하지만 리액트에서는 보통 변수 말고, state를 만들어서 데이터를 저장한다. 데이터의 값이 잘변 하지 않는 값은 변수에 저장하거나 하드 코딩해도 되지만, 값이 자주 바뀔거 같으면 state에 값을 저장하는 것이 좋다.(그냥 웬만하면 state 쓰는 것이 좋다) 이는 리액트의 동작 방식 등과 관련이 있는데 해당 내용은 추후에 다루도록 하겠다. 일단 state의 사용방법은 다음과 같다. import { useState } from 'react'; import './App.css' function App(){ let [shirts, setShirts.. 2023. 5. 26.
리액트란? SPA란? 기본적인 JSX 문법 3개 리액트란 무엇이며, 왜 쓰는 것일까? 프론트페이지를 쌩자바스크립트로 만들라고 하면, 코드가 너무 길어지고, 복잡해지는 단점이 있다. 이러한 단점을 보완해주기 위한 자바스크립트 라이브러리에는 React, Vue, Svelte, SolidJS 등이 있는데, 이 중, 리액트가 가장 레퍼런스가 많고, 유저가 많다는 특징이 있다. SPA란? SPA란 Single Page Application의 줄임말로, 다음과 같은 특징을 가진다. 1. html 파일을 1개만 쓰고 2. 다른 페이지를 보여주고 싶을 때, html 부분만 갈아치워서 보여주는 방식을 사용한다. 3. 위와 같은 특징들 때문에 웹페이지가 부드럽게 동작한다. JSX란? 원래 리액트환경에서 div 태그를 하나 만들고 싶으면 자바스크립트로 다음과 같이 코드를.. 2023. 5. 26.
JSON.parse(), JSON.stringify()가 무엇인지와 왜 쓰는지 문제 상황 & 문제 인식 여느 때와 다름없이 회사의 업무를 보고 있었다. 특정 api에 axios 요청을 한 후, react-query를 이용하여 받아온 res 값을 파싱하여 화면에 띄워주는 일을 하고 있었다. 요청을 정상적으로 보내고 응답도 제대로 와서 점 표기법(Dot notation)을 사용하여 데이터 값에 접근을 하려고 하였다. 그런데 내가 원하는 값으로의 접근이 잘 안되었다. NaN에 해당하는 부분에 원래는 NaN이 아닌 res.data.totalCount라는 숫자가 들어가야 하는데 나의 의도와는 다르게 NaN이 출력되는 모습이다. 원인 분석 처음에는 데이터가 제대로 안 오는 줄 알아서 Postman을 통해 API 응답 데이터를 확인해 보았다. Postman에서도 확인을 해보니 응답 데이터가 객.. 2023. 5. 25.
!! 연산자 !! 연산자 회사에서 레거시 코드를 분석하던 중에 !!라는 생소한 코드를 보게 되었다. (이 이상은 보안상 공개불가..ㅎㅎ) 처음 생각했을 때, 위 코드에서 existWebQuery 변수에는 dbInfo와 queryInfo가 둘 다 true일 경우, true 값이 저장되는 코드다라고 생각했다. -> 어느정도 맞지만 엄밀히 말하면 아닙니다. 생각을 해보면 '논리 부정 연산자 '!'를 두 번 썼다면 부정의 부정이니 원래 dbInfo, queryInfo 값이 아닌가?' 라는 의문이 들었다. 그래도 선임자가 저 코드를 괜히 쓰지는 않았을테니 그 이유가 궁금하여 !! 연산자에 대해서 찾아보았다. 자바스크립트에서 '!!'는 boolean 값을 반환하도록 하는 간단한 방법 중에 하나이다. 또한 boolean인 값으로.. 2023. 5. 25.
728x90

티스토리툴바