자바스크립트를 사용하는 웹 프레임워크 중 하나이며, 웹앱을 만들 때 많이 사용된다고 한다.프로젝트 경로로 터미널 이동후 npm 명령어를 사용하여 생성되었는지 확인 할수있다 ❗ 오류가 난다면 localhost:3000 이라고 크롬 브라우저 열고 직접 입력node_modu
React에서 class="" 를 넣고 싶으면 className="" 이라고 사용해야한다데이터바인딩은 자바스크립트 데이터를 HTML에 넣는 작업을 뜻합니다.중괄호안에 데이터바인딩하고 싶은 변수명만 담으시면 됩니다. ❗ JSX 상에서는 무조건 { } 오브젝트로 바꿔서 넣
React에선 변수 말고 state를 만들어서 데이터를 저장해서 쓸 수도 있습니다 ❗ 파일에 코드를 추가하여 사용할수있다❗ useState( 저장할 데이터 ) 이렇게 사용하시면 state에 데이터를 저장하실 수 있습니다.useState()를 쓰면 데이터가 두개 남습니
❗ 리액트 중괄호 내에서 if문을 사용할 수 없어서 if문 대용 역할을 할 수 있는 삼항연산자를 사용합니다.ex) 버튼 눌렀을 때 열리고 한번 더 누르면 닫히는 내용내용 이라는 state를 만들었고 기본값은 false로 주었습니다.
❗ map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때자바스크립트 map 함수 쓰는 법❗ 반복된 HTML에 각각 다른 제목을 부여하고 싶다면❗ a라는 파라미터는 map이 반복될 때마다 하나하나의 데이터들을 의미한다. 1\. 따로 일반 함수를 만들고 2
<자식컴포넌트 전송할이름={state명}> 이렇게 사용해주신 후자식컴포넌트 선언하는 function 안에 파라미터를 하나 만들어주시면 됩니다.❗ <Modal 전송할이름={state명}> 이렇게 원하는 state를 적어주시면 전송됩니다. ❗ 그리고 func
❗ 사용자가 input에 입력한 데이터를 state로 저장하는 법❗ 사용자가 input에 입력한 값 알아내는 법input에 onChange 이벤트핸들러를 달고 자바스크립트 문법을 쓰시면 됩니다. ❗ input에 뭔가 입력할 때마다 input에 입력된 값을 stat
❗ 이 파일에서 중요한 변수를 export하고 싶을 땐 export default라는 문법을 쓰시고 우측에 배출을 원하는 변수를 담아줄 수 있습니다.변수명, 함수명, 자료형 전부 배출가능합니다.파일마다 export default 라는 키워드는 하나만 사용가능합니
react-router-dom이라는 공식 라이브러리를 설치 ❗ BrowserRouter 말고 HashRouter 라는 태그도 이용할 수 있습니다.HashRouter를 복붙하시면 사이트 방문시 URL 맨 뒤에 />BrowserRouter를 복붙하시면 사이트 방문시 ❗
❗ 컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생김class 만들어놓은걸 까먹고 중복해서 또 만들거나갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나CSS 파일이 너무 길어져서 수정이 어렵거나리액트에서 props 전송하실 땐 두가지 방법이 있습니다
❗ class 컴포넌트 작성하는 곳 안에 그냥 대충 작성하시면 됩니다. 가장 유용한 Hook 두개는componentDidMount() componentWillUnmount() 입니다.미리 페이지 상단에서 useEffect를 import 해오신 후useEffect() 를
서버에 새로고침없이 요청을 할 수 있게 도와주는 일종의 자바스크립트 코드입니다❗ GET, POST 이런 요청방법이 있습니다.GET : 데이터, 웹페이지 같은걸 읽고 싶을 때 서버에 보내는 요청입니다.POST : 데이터를 서버로 보내고 싶을 때 서버에 보내는 요청입니다.
state 값을 공유하고 싶으면 context 만든다그냥 createContext()라는 함수를 이용해 변수를 만듭니다 그럼 그 변수는 <컴포넌트>가 됩니다. <범위></범위>로 전부 감쌉니다.그리고 value={state이름} 이렇게 공유할 state
데이터를 보관하기 위한 Redux 설치/셋팅❗ 그 다음 redux를 이용한 개발환경을 셋팅하시려면 index.js를 열어 다음과 같이 작성합니다.라는걸 import 해오신 다음에 내가 state값 공유를 원하는 컴포넌트를 다 감싸시면 됩니다.데이터사용을 원하는 컴포넌트
'수량증가'라는 데이터 수정방법 이름을 하나 작명합니다. (액션.type === 수정방법이름)if문 안에는 '수량증가'라는 요청이 들어올 경우 어떤 state를 내보낼지 정의.else문 안에는 수량증가 요청이 안들어온 경우 기본 state를 내보낼지 정의. 버튼 누를
❗ '항목추가' 라는 요청이 들어오면 카피본을 생성해서 전송받은 데이터를 push ❗ dispatch 하실 때 안에 type말고 payload라는 항목을 신설해주시면 됩니다.(payload 말고 다른 이름 작명도 가능이 항목에는 여러분이 redux store로 전달할
❗ else 생략이 가능하다삼항연산자는 중첩 사용도 가능하다❗ 남이 읽었을 때 보기 싫은 코드는 좋은코드는 아닙니다❗ 둘다 true면 전체를 true로 바꿔주세요&& 기호를 중첩해서 여러개 쓰면 && 사이에서 처음 등장하는 falsy 값을 찾아주고 그게 아니면 마지막