React

만들기전 React JSX 기본 문법!평소에 짜던 html/css 와 다른 부분이 있다.스타일을 줄때 class가 아닌 className="" 를 사용한다ex)let name = 'wook' 변수를 지정하고ex){속성명: '속성값'} 이렇게 넣어서 사용한다 리엑트에선

React에 있어서 기본적으로 3가지를 기억하라고 한다. UI를 그릴때1\. html css로 디자인 미리 완성해놓고2\. UI의 현재 상태를 저장할 state 하나 만들고3\. state에 따라서 UI가 어떻게 보일지 작성한다.이런식으로 구상하고 로직을 짜보자쇼핑몰

React-query 는 서버의 값을 클라이언트에 가져오거나 , 캐싱 , 값 업데이트 ,에러 핸들링 등 비동기 과정을 편하게 하는데 사용한다 / 실시간 데이터를 보요주는 사이트는 리액트 쿼리를 사용하는게 좋다!1.성공 / 실패 / 로딩중 상태를 쉽게 파악이 가능하다 \

리액트는 SPA방식이고 기존 웹 페이지처럼 새로윤 웹페이지를 사용하는게 아니고 페이지를 로드하지 않고 필요한 데이터를 가져온다! url에 따라 선택된 데이터를 페이지에 렌더링 해준다.\-사용하기전 라이브러리 설치 방법 터미널에 npm install react-route

컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다.\-useEffect 발동조건1.페이지가 렌더링 될 때2.state 값이 변경되면서 실행 될

\-리액트는 기존 객체의 동일한 참조값의 내부를 아무리 변경해도 변경되지 않는다.직접적으로 객체의 값에 접근해 변경하면 참조값이 그대로이기 때문에 React는 변화를 알아채지 못한다.\-리액트는 변화가 일어난걸 알아야 리렌더링이 되는데 내부를 변경하면 리액트는 인식을

\-중복적으로 작성해야 하는 경우가 많기 떄문에 반복적인 코드 작성을 최소화 하려고 사용한다\-순수 css를 사용하고\-어디서나 사용가능하다 \-다양한 플러그인을 사용할 수 있어서 덜 제한적으로 사용이 가능하다고립성독립성 순수css -> 입문자에게 좋다! \-회사에서

1.경로를 설정해줌 Routerpath란 뒤에 입력한 값을 이용해서 뒤에 element 값에 접근 할 수 있게해준다!Path 뒤 변수 파라미터라고함 :id 를 두면 어떤 값이 오더라도 저 아이디로 가지고 있을수 있다Element = 어디로 갈지 Redux 폴더 Mo

Redux ToolKit은 리덕스를 더 쉽게 사용하기 위해서 이다. 이름 그대로 리덕스를 위한 도구이다! 리덕스에는 문제점이 있다 . 대표적으로 1.리덕스의 스토어는 환경 설정하는데 너무 복잡하다 2.리덕스를 사용하려면 패키지를 많이 추가 해야한다! 리덕스를 사

useRef 는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook 이다 ! Ref는 참조를 뜻한다 Ref를 통해 DOM 요소에 접근이 가능하다 대표적으로 인풋요소를 클릭하지않아도 포커스를 주고싶을때 사용된다로그인화면이 보여졌을때 아이디를 넣는 인풋을

\-참고한 로직 참고한 로직 getDocs로 파이어 스토어에 올린 Data를 가져와서 메인 홈페이지에 뿌려준다.작성한 로직파이어스토어에서 가져온 get 해온 데이터를 담아줄 state를 만들어 주었다!snckcollectionRef 변수안에 파이어스토어에 있는 prod

오늘 다크모드를 구현하려다가 porps drilling에 어려움을 겪고 있어서 방법이 없을까 이것저것 찾아보고 있었다 그렇게 찾아본것이 useContext라는 리액트 훅이였다 ! 내게 필요한 props 를 글로벌하게 사용할 수 있게 도와주는 훅이다! 원래라면 리액트 작

Memo= memoization 을 뜻함 동일한 값을 리턴 하는 함수를 반복적으로 호출해야 한다면 맨처음 값을 계산할 때 해당값을 메모리에 저장해서 필여할때 마다 또 다시 계산하지 않고 메모리에서 꺼내서 재사용을 하는 기법이다! 간단하게자주 필요한 값을 맨처음 계산할때

\-정규식이란 ? 회원가입 폼에서 사용되는 정규식은 입력한 정보가 특정한 형식에 맞는지를 검사하는 패턴이다. 이를 통해 회원가입 시 입력되는 정보의 유효성을 검사하고, 잘못된 입력을 방지할 수 있다.현재 유저가 타이핑 할 때 실시간을 정규식에 맞는지 안맞는지 코드를 작