react

리액트프로젝트에서는 App.js가 메인 페이지이다.css는 App.css파일 열어서 집어넣으면 된다.App.js에 짜고 있는건 html이 아니라 JSX이다.JSX는 html과 사용방식이 비슷하지만, 일종의 자바스크립트이다.\-> 자바스크립트의 예약어인 class는 ht

그냥 변수에 저장할 수 있지만, state를 쓰는 이유는지속적으로 변경이 일어나는 값을 관리하기 위함!state는 변동사항이 생기면 html도 자동으로 재렌더링해준다!state는 직접 변경하면 안 된다. (재렌더링이 안됨)반드시 setState를 이용하여 값을 변경!s

동적인 UI -> 유저가 조작시 형태가 바뀌는 UI들을 의미. html css로 미리 UI 디자인을 다 해놓고UI의 현재 상태를 state로 저장해두고state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성JSX 안에서는 if else 문법을 바로 사용할 수 없다.

props로 부모 -> 자식 state 전송하는 법 자식컴포넌트 사용하는 곳에 가서 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용

onChange > { 실행할코드 }}/> input에 유저가 뭔가 입력할 때마다 안에 있는 코드를 실행해준다! 이러한 이벤트핸들러는 많다. 필요할 때마다 구글링해서 사용하자! input에 입력한 값 가져오는 법 > { console.log(e.target.val

class 문법으로 컴포넌트 만드는 법 class 컴포넌트에서 state 변경 class 컴포넌트에서 props

새로운 프로젝트를 생성하고 app.js를 수정하고 저장하려는데 뜨는 문구..권한 부족으로 'App.js'을(를) 저장할 수 없습니다. 슈퍼 사용자로 다시 시도하려면 'sudo로 다시 시도'를 선택하세요.sudo로 다시 시도 누르고 패스워드까지 입력했지만 해결 안됨..이

긴 데이터를 state에 집어 넣을 때, 따로 파일을 만들어 저장하고 가져다 쓸 수 있다!예를 들어, data.js 파일에 데이터를 넣어 놓고, export 해준 뒤,메인 페이지에서 import하여 가져다 쓸 수 있다!export default 변수명; 이렇게 쓰면 원

url 경로마다 다른 페이지를 보여주고 싶으면 라우터를 사용한다.우선 상단에서 여러가지 컴포넌트를 import 해오고,<Routes> 만들고 그 안에 <Route>를 작성한다.<Route path="/url경로" element={ <보여줄html>

오늘 배울 것들 importLink 써도 되지만, 그게 디자인이 구리면 useNavigate 사용ㄱ ㄱ유저가 이상한 경로로 접속하였을 때, 없는 페이지라고 보여줄 수 있음.\* 경로는 모든 경로를 뜻함. 위에 만들어 두지 않은 url일 경우, \* 경로로 안내해줌.예를

이렇게도 작성할 수 있지만 귀찮으니까 url파라미터를 사용해보자~=> 'detail/아무 문자' 이렇게 전송됨. 이 문자를 Detail 컴포넌트에서 사용하려면컴포넌트 내에서 변수에 할당해서 사용할 수 있다.

styled-components 라이브러리를 사용하면, 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수 있다. styled-components 기본적인 사용법

우리가 만들어쓰고있는 컴포넌트는 Lifecycle이라는 개념이 있다.컴포넌트도 인생이 있다는 것,,=> 컴포넌트는생성이 될 수도 있고 (전문용어로 mount)재렌더링이 될 수도 있고 (전문용어로 update)삭제가 될 수도 있다. (전문용어로 unmount)우리 인생

서버란? 유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램 서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야하는데 어떤 데이터인지 (URL 형식으로) 어떤 방법으로 요청할지 (GET or POST) 잘 기재해야 데이터를 보내준다. 데이

동적 UI 만드는거랑 똑같음근데 또 기억이 가물가물하니까 정리를..디자인하기 귀찮으니까 부트스트랩으로 대체.탭이 3개라 0, 1, 2이렇게 저장하기 위해서 숫자로.!if문으로 비교하기 위해서, component로 이동 ㄱ ㄱ어떻게 ㅎㅏㄹ까? 는 onClick....오,

애니메이션 만들고 싶으면 애니메이션 동작 전 스타일을 담을 className 만들기 애니메이션 동작 후 스타일을 담을 className 만들기 transition 속성도 추가원할 때 2번 탈부착이번엔 fade in 애니메이션을 만들어 볼 것.transition은 해당

Redux는 props없이 state를 공유할 수 있게 도와주는 라이브러리이다!귀찮게 props 써서 전송할 필요가 없다는 말씀.,,js 파일 하나에 state들을 보관할 수 있는데보통 store.js 파일 안에 담아 보관한ㄷㅏ그럼 모든 컴포넌트가 직접 꺼내 쓸 수 있

컴포넌트에서 JSX를 조건부로 보여주고 싶으면 그냥 이렇게 쓸 수 있다!return () 안의 JSX 내에서는 사용 불가능합니다.<div> if (어쩌구) {저쩌구} </div> 이게 안된다는 거임.그래서 보통 return + JSX 전체를 출력하는 if문을

localStorage 문법 localStorage에 array/object 자료를 저장하려면 문자만 저장할 수 있는 공간이기 때문에, array나 object자료형으로 저장할 수 없다. 이럴 때는 JSON을 사용하여 문자열인 척 저장하자! JSON은 그냥 따옴표친

실시간 데이터가 중요하다면, react-query를 사용하여 몇초마다 자동으로 데이터를 가져올 수 있다!SNS, 코인거래소같은 실시간 데이터를 보여줘야하는 사이트들이 쓰면 유용.useQuery로 ajax요청을 감싸면 됨.ajax요청이 로딩중일 땐 result.isLoa