React

바로 web app을 만들기 위해서!web app이란, 다른 페이지로 넘어가거나, 포스팅을 발행하거나 이런 행동을 할 때에도새로고침 되지않고 스무스하게 동작함. 흡사 모바일 앱! UX가 뛰어나서 좋은 사용자경험을 제공하니까HTML 관리가 편해지고구매전환율도 높아지고리액

React에서 html을 구성할 때 원래라면이런식으로 짜야함. 매우 귀찮고 어려워보임..그래서 누군가가 JSX라는 문법으로 html과 비슷한 구조의 언어로 짤 수 있는 방법을 만들어냈다. 이 영특한 JSX 덕분에 현재 React는 이렇게 html과 비슷한 구조로 js안

이렇게 간단한 자료를 변수에 담아 바인딩했던 것 외에도 state문법이라는 것이 있다. 변수에 담은 자료는 만약 저장된 자료의 내용이 변경된다고 할지라도 html을 자동적으로 변경해주지않죠. 하지만 state라는 애는 자기가 알아서 html을 재렌더링 해줌! 그니까 자

이런 블로그를 만들어보겠습니당.일단 state로 빼면 좋을 부분부터 정해보면,첫번째. 블로그의 글 list부분의 제목(여자신발추천, 강남하이볼맛집,파이썬독학) 두번째. 따봉 아이콘을 누르면 옆의 숫자가 증가하는데, 이때 이 숫자는 state로 만들어주면 좋겠군그럼 하나

component함수명은 다른 함수들과 구별하기 좋게 대문자로 시작해야함. 다른 function 스코프를 벗어난 곳에서 생성해라(function app()도 나와서 생성하기)return()안 바로 오는 div는 병렬적 구조 안됨. 하나의 div로만 모두 감싸져있어야한다

1\. array 자료 개수만큼 함수안의 코드를 실행2\. 첫번째 파라미터는 array속 자료, 두번째 파라미터는 순번. 3\. return 안의 구문은 array로 담아줌. html구조 영역에 스크립트를 쓰는 것이니 {}안에 구문을 넣어야함. 글제목 status의 배

부모컴포넌트인 <App/>에서 쓰여진 state구문을 자식인 <Modal/> 쓰고싶다면? - >props로 받아오자1\. 자식 컴포넌트를 사용하는 부분에서 작명={state명}2\. 자식 컴포넌트를 생성하는 함수부분에서 function Child(prop

자바스크립트에서는 input의 value값에 접근할 때 이런식으로 직접 DOM에 접근해서 값을 추출해왔다.하지만, DOM을 직접 건들이지않는 React에서는 어떻게 접근할까?바로 값을 저장하고, 변경할 수 있는 함수를 갖는 state라는 개념을 사용한다. input의

그럼 일단 input값을 저장할 state생성하기그리고 html DOM구성 component안에서 input생성, 이벤트 달자이거 js문법. 이벤트핸들러임. onChange={(e)=>{인풋깂변경함수(e.target.value);}onChange만약 상태값이 chang

get started - npm 방식으로 추가 - css추가 (import방식 app.js / link방식 public/index.html)1\. 쓰고자하는 ui를 골라 사용하고2\. 상단에 해당 컴포넌트를 import해주기css파일로 backgrond설정의 방법 외에

데이터바인딩할 때변수나 state를 사용해 객체나 json형태의 정보뭉치를 넣는다. 근데 이렇게 정보가 너무 길 땐 따로 빼서 새로운 파일로서 만들어 관리하는 게 편하지않을까? 👉 import - export사용하려는 data를 새로운 파일로 생성해두고, 변수로 해당

애플리케이션에서도 여러 상세 페이지가 있을 것. 만약 Js라면, 이러한 스텝으로 코드를 짤 수 있다.하지만 react는 index.html로 하나의 html만을 갖는다. 따라서 React에서는, 이걸 모두 조건으로 처리해야하는데 직접 코드를 짜려면 너무나 귀찮을듯..그

페이지이동은 Link를 사용하는데, 이 방식은 a태그와 비슷하게 링크를 만들어낸다. 이러한 방식이 싫다면 useNavigate()라는 hook을 사용할 수 있다. 💡 Hook리액트환경에서 쓸 수 있는 use- 가 붙은 것들. 일종의 내장함수로서 특정 기능을 수행해준다

만약, 상세페이지를 여러개 만들면?이렇게 다 따로 path를 지정해줘야함..매우 귀찮음..이때 url파라미터 를 사용하면 이를 해결할 수 있다. /:id 이 자리에 사용자가 주소창에 접근한 하위 페이지의 데이터가 들어온다. 만약 사용자가 detail/1이라고 주소창에

보통 ui의 디자인 작업은 css에서 진행하는데, styled-components문법을 사용하면js파일내에서 바로 스타일이 지정된 컴포넌트를 사용할 수 있다.1\. CSS 파일 오픈할 필요없다.2\. 여기 적은 스타일이 다른 JS 파일로 오염되지 않습니다.3\. 페이지

component 에게도 인생이 있다..무슨 말이냐면,1\. 생성되고 (mount)2\. 업데이트도 되고 (update)3\. 필요없어지면 소멸되고 (unmount)우리는 이 각각의 지점에 고리를 걸어 간섭, 즉 어떤 기능을 실행시킬 수 있다. 이런 고리를 hook 이

우리는 서버로부터 어떤 데이터를 받아오거나, 보내도록 요청할 수 있다.요청을 할 때는 정확하게 규격에 맞춰 두가지 요청을 해야한다.1\. 방법 ( GET / POST )2\. 어떤자료 ( URL )우리가 브라우저주소창에 URL로 검색하고 접속하는 행위가 사실은 모두 G

component끼리는 서로의 state를 공유할 수 없다. 하지만 예외로 자식component는 props를 통해 부모component의 state로 접근할 수 있다. 하지만 바로 직계자식에게만 전달해줄 수 있어 component의 구조가 여러번 중첩된다면..?부모>

store.js 내에서 이렇게 만들어진 하나의 state를 slice라고 한다.createSlice로 생성해줬다면, 이 생성된 전체를 state로서 등록을 해줘야한다. 이를 위해 createSlice구문을 변수로 지정해 할당한다. store.js 내에서 예시코드 사용

함수생성store.js 내에서reducers:{}를 열고 함수를 만들면 된다.파라미터를 하나만 작명하면, 해당 파라미터는 기존state값을 받는다. return 우측에는 새로운 state값을 입력하며, 기존 state를 갈아치운다. export만약 setter함수가 여

state가 array나 object일 때에는 state에 직접 접근해 변경해도 잘 변경된다. redux설치할 때 같이 딸려온 immer.js라이브러리가 state사본을 하나 더 생성해준덕분.이렇게 수정이 더 편해지기때문에 일부러 문자, 숫자등의 데이터도 array나

tab은 버튼, 내용 이렇게 크게 두가지 영역으로 나누고, 0번째버튼->0번째내용1번째버튼->1번째내용2번째버튼->2번째내용이런 구조가 된다. 리액트 환경에서는 어떻게 짤까. 우선, 보였다 사라졌다 하는 동적 UI 구성은 state를 생성해 스위치 처럼 쓴다 그리고 h

component간 state는 공유되지않는다. 하지만 부모-자식 component간 props를 통해 전달받는 것은 가능함. 단, 직계 부모-자식 사이만 가능하기에 각 단계에서 모두 props처리를 해줘야한다. 매 우 불 편 따라서 state를 공유하기 위한 방식으로