React

react에 대해서 처음 공부하는 것이고 간단하게 써보려고한다.React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.React의 가장 큰 장점이라 하면 데이터 바인딩이 쉽다.html 태그안에 변수명을 집어넣거나, 함수

자바스크립트에 map이라는 함수가 있다.모든 array 자료에 map() 함수를 붙일 수 있다.array에 들어있는 자료 갯수만큼 그 안에 있는 코드를 반복 실행해준다.consoloe.log(1)이 3번 실행 되는 걸 볼 수 있다.콜백함수에 파라미터를 넣으면 그 파라미

React에는 부모의 state를 전달해줄 수 있는 props문법이 있다.한번 알아보자.해당 코드는 글제목이라는 변수가 define 되지 않았따는 에러를 볼 수 있따.왜냐하면 글제목이라는 state 변수는 function App() 안에 있지 Modal안에 없으니깐 말

컴포넌트를 만들 때 function을 쓰면 되는 걸로 알고 있었다.근데 예전 리액트에서는 class 문법을 많이 사용했기에, 잘 쓰진 않겠지만 잘 알아두면 좋을 것 같아서 기록한다.class 이름 extends React.Compnent를 쓴다.constructor,

기존의 페이지를 나누는 법은 생html을 여러가지 만드는 것이었다.근데 리액트에선 하나의 html만 사용하기에 기존의 div를 바꿔서 보여주면 된다.이를 위해서 라우터를 사용한다.우선적으로 외부라이브러리이기에터미널에서입력해서 설치해준다.셋팅은 index.js 파일로 가

쇼핑몰 사이트를 만들 때, 제품의 상세페이지를 볼 수 있는 페이지가 있을 것이다.나 같은 경우에 App.js 안에 item이라는 데이터를 state로 보관중에 있다.그리고 라우터를 하나 만들어 을 쓰는 곳에 props item이라는 데이터를 전송시켰다.이렇게 props

컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 있다.다른 스타일이 적용되거나, css 파일이 너무 길어지거나, class를 다시 중복해서 만들거나.. 등등그래서 리액트로 css를 만들려고 할 땐 styled components 라이브러리를 주로 사용한다.터미널을 열

컴포넌트에는 Lifecycle이라는 개념이 있다.생성이 될 수 있고(mount)재렌더링이 될 수도 있고(update)삭제가 될 수 있다.(unmount)우리는 컴포넌트 라이프 사이클에서 중간중간에 개입을 해서 내가 원하는 코드를 입력해서 코드를 실행할 수 있다고 보면

일반적으로 get,post 방식은 브라우저를 새로고침하게 된다.새로고침이 없이 서버에서 데이터를 가져와서 사용하려면 ajax를 사용하면 된다.ajax로 get/post 요청을 처리하려면 3가지 방법이 있다.XMLHttpRequest라는 옛날 문법 쓰기fetch() 라는

설치 때 만들어놓은 store.js 파일에서 state를 만들어서 보관할 수 있다.1\. createSlice()로 state를 만들고2\. configureStore() 안에 state 등록하기상단에서 createSlice()를 import 해온 다음createSli

state를 만들어서 사용해보면서 새로고침을 하면 항상 데이터들이 리셋이 되었다.왜냐면 브라우저가 새로고침이 되면서 html,css,js파일들을 다시 읽기 때문이다.서버에 데이터를 보내서 디비에 데이터를 저장하면 이를 방지할 수 있는데 내가 현재 서버나 DB가 없다면

예전에 실시간 웹 푸시 알람 기능을 구현하려고 파이어베이스를 사용하려다 그냥 ajax 통신으로 기능을 구현한적이 있었다.그때는 생Js를 사용했는데 React에서는 react-query라는 것이 있다고 했다.몇초마다 자동으로 데이터를 다시 가져오게 할 때요청실패시 몇초

리액트로 개발이 다 끝나면 npm run build를 입력해서 코드들을 html,css,js파일로 변환해야한다.근데 리액트는 Single Page Application의 특징을 갖고 있기에, html,js파일이 하나만 생성이된다.한 파일에 모든 코드들이 다 쑤셔넣어지니

그냥 참고로 알아두자A라는 컴포넌트와 B라는 컴포넌트가 있을 때, B가 A의 자식이라 생각해보자A라는 컴포넌트가 재렌더링이 되면 자식 컴포넌트인 B도 자동으로 함께 재렌더링이 된다.근데 만약에 B라는 컴포넌트가 무거운 컴포넌트라면?A 컴포넌트가 재렌더링이 될 때 당연히

리액트 18버전 이후부터는 state 변경함수가 여러 개 있더라도 마지막 state 변경함수 이후에 재렌더링이 된다.이를 batching 이라고 한다.근데 만약 batching이 싫다면 flushSync라는 함수를 사용하면 된다.나중에 참고하자만약 렌더링 시간이 매우