react

리액트는 데이터 바인딩이 매우 쉽다(?) 는데 이걸로 웹앱을 만들기 아주 좋다고 하는데 한번 만들어 보도록 하자

html을 한 단어로 축약해서 쓸 수 있는(사실 리액트 쓰는 큰 이유중 하나react의 마법의 component 문법모달창을 만들고 싶다면 이렇게 나만의 단어로 치환해서 쉽게 적용할수 있다제일 상단에 시작하는 function app() {} 밖에내가 넣고싶은 컴포넌트(

html을 반복문으로 반복시킬수가 있다?!JSX에서는 중괄호 안에 for문을 쓸때 for를 쓸 수가 없음 ㅠㅠ그래서 map();이라는 함수를 써야하는데 이 함수는 array에다 붙일수 있는 함수다..! 예시를 들어보자.a 라는 파라미터는 어레이 안에 있는 하나하나의 데

할때 써야하는것이 props 부모 컴포넌트는 자식 컴포넌트에게 데이터를 전송해줄수가 있음. 이해가 쉽게 한글변수명을 통해 알아보겟다..(이건 다 초심자들을 위한 설명이옵니다..한글에 분노하지마세요..)보통 작명은 state 이름과 똑같이 짓는다고한다.ex : jiwon

react input은 무조건 닫아줘야한다 슬래쉬로 닫아야한다input에 담긴 값은 state로 저장하게끔 하자input에 입력한 값이 저장될 공간이다.문자열로 입력되기 때문에 () 안에 ''로 넣어주자, 이게 0과 같은 초기값이 된다 input에 입력하면 뭔가 작동해

먼저 우린 아직 db를 다룰수없기에 다른곳에 데이터를 저장해야한다 ㅠ ㅠ 그게 어디인가 하면 !뭐 맨날 하던곳이죠 어디겠습니까? 새로운 블로그 글을 발행해야하니까, 기존에 우리 만들어놨던 목록들state 기억하시죠? 거기에 추가해서 저장하도록 하자먼저 글을 적을수있는

profile 이라는 클래스의 react component를 만들겟습니다~ 라고 이해하면 쉽다. 저게 기본 양식이고 state안에는 많은 값을 저장할수있다. 이름 나이 뭐 등등등..그렇게 저장한 state를 꺼내쓰려면 사용하려는 위치에 데이터 바인딩을 하면 되는데,

늘 그렇듯 npx create-react-app shop으로 shop이라는 이름의 프로젝트를 하나 만들어주자 파일 - 열기 로 shop이라는 프로젝트 오픈 ui를 짜기가 귀찮다면 react bootstrap을 이용해 손쉽게 짜보도록 하자.요로케 복붙해서 넣어주면 부트

먼저 데이터 모음 파일을 src 폴더에 만들어놓자 이 파일 맨 위에에는 이렇게 꼭 !!! 적어주어야함그대신 저렇게 괄호안에 여러 변수를 담아서 한번에 내보내기는 가능하다 !import 할 때 여러변수를 넣고싶다면 저렇게 괄호를 치고 콤마를 사용하여 변수명을 그대로 적

일단 터미널에 라이브러리부터 깔자이렇게하면 손쉽게 설치가 끝 !index.js로 가서 이렇게 그대로 작성해준다 보통 경로에 ./ 가 없고 이름부터 시작한다 하면라이브러리 라고 생각하면 된다 !이렇게 사용할수 있어진다 앞으로 라우터는 2가지 방법으로 보통 할수있는데해쉬

일단 먼저 우리가 만들어놓은 디테일 페이지에 데이터 바인딩을 해보자.상위 app.js 컴포넌트에서 만들어놓은 shoes 라는 state를 기억하는가? 거기에 데이터가 들어가있으니 props로 받아와야겠지? 그래서 적은것이 상단 이미지다.Detail(props)를 주었고

해석하자면 컴포넌트의 생명줄기(인생) 컴포넌트는 생성이 될수도 있고, 삭제될수도있고(다른페이지로 넘어가는것 등등), state가 변경되면 업데이트가 될 수도있음 이거를 lifecycle 이라고 합니다우리는 예를들어 "컴포넌트가 생성되기전에 \~\~~한 Hook을 걸어주

먼저 재고 데이터를 만들어주자, 이걸 이제 Detail.js 까지 끌어와서 데이터 바인딩을 할거다.가격 아래에 재고를 보여줄건데, 쭉쭉 적으면 너무 길어지니 이것도 컴포넌트로 만들어서 넣자요렇게 컴포넌트를 만들고이렇게 끼워넣어주자 ! 이제 할거는 우리가 app.js에서

여기 메인 페이지 상품아래마다 재고데이터를 박아주려고 한다 !가격 아래에 새로운 컴포넌트를 만들어놓고, 그곳안에다가 데이터 바인딩을 하려면 ? 뭘 어쩌긴 어째 ! props를 2번쓰고 뭐 그렇게 해야지..좀 골치아프겠지 ! 그런게 귀찮다면 ? react 내장문법임이러한

자 오늘은 이런걸 만들어보자!이렇게 누르면 정보를 볼수있는 기능이 들어간 Tab UI를 만들어볼건데Detail.js로 들어가서 만들어보도록 하자 ! 구조적인 기능은 아주 단순하다 각각 버튼을 누르면 저장해둔 "state가 0으로,1로,2로 변하게 해주세요" 만들고밑에

강사님의 간략한 명강의다..

먼저 자바스크립트에서의 동기방식을 알아보자이제 리액트에서의 동기방식을 알아보자강사님의 명강의였다.. ..

우리 보통 이름이 없는 가벼운 함수 만들어서 사용할때 이렇게 jsx 안에다가 적어서 사용했는데 이렇게 사용하면 용량을 꽤나 먹는다이렇게 쓰지말고 그냥 따로 함수로 만들자 이런식으로 말이다,, 그리고 이렇게 첨부해서 사용하는 습관을 들이자 스타일도 이렇게 오브젝트 형식으

먼저 예시용 컴포넌트를 3개 만들어보자부모 컴포넌트와 자식 컴포넌트 2개이다부모 컴포넌트에는 이름과 나이값을 넣어주고 자식들에게 props를 주게되면 자식들은 그 값을 props로 물려받을수 있다 근데 갑자기 이름(데이터)을 바꾼다면? 이렇게 변하지 않을까? 이건 아주

리액트는 HTML 파일을 이쁘게 만들어주는 도구일뿐 특별한게 아니다 ! SPA : Single Page Application원페이지 앱 인데, 자바스크립트를 이용해서 페이지는 하나인데 ! html파일을 갈아끼워서 페이지를 나누고 바꾸고 한다(장점은 모바일앱처럼 부드럽게

먼저 input을 활용해 이름과 닉네임을 지어줄수있고, 초기화도 할수있는 기능을 만들자이렇게 이름과 닉네임을 지으면값: 이라는 부분에 똑같이 입력이 되게끔 만들자 useRef라는 라이브러리를 import 해주고nameInput 이라는 객체를 만들어주고 ! 이 객체는 우

먼저 비효율적인 방법으로 배열안에있는 객체의 데이터를 렌더링해보자, 효율적인건 이 다음에 ! 먼저 유저리스트라는 컴포넌트를 만들어주고, users 라는 배열을 만들어주자그리고 이 배열안에있는 원소들을 하나하나 렌더링 해주는 jsx코드를 작성하자user의 name을 보

특정 DOM을 선택할때도 쓰이기도 하지만컴포넌트가 리렌더링 될 때 마다 계속 값을 기억해야할때도 사용한다 useRef로 관리하는 값은값이 바뀌어도 컴포넌트가 리렌더링 되지 않는다 ! 상단에 import useRef먼저 해주고우리가 전에 userList.js에 만들어놓은

먼저 CreateUser.js라는 컴포넌트를 만들어주자 ![](https://images.velog.io/images/catdev/post/b0a4faf0-0721-42c4-95cf-18d2a93926fc/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%

자 배열에 항목을 추가했으니, 반대로 삭제하는법도 알아보자이렇게 유저리스트 목록 옆에다가 '삭제'버튼을 만들어주자그럼 요렇게 이제 생성이 딱 되고유저리스트 컴포넌트는 이제 삭제하는 함수의 값도 받아와야 하기 때문에 props로 onRemove라는 값을 넣어주자onRem

항목을 선택했을때 항목의 색깔이 변경되게 수정해보자이렇게 이름을 누르면 초록색으로 바뀌는게 목표다먼저 유저데이터에 active라는 설정값을 만들어주자이름은 무엇으로 하든 상관 없지만 이해하기 쉽고 직관적인걸로 만들자 항상첫번째 값에만 true값을 준 이유는 제일 상단에

useEffect는 이전에 hook을 거는것과 같다고 배웠다 업데이트 직전에 ! 종료되기 직전에 !값이 수정되거나 바뀌거나 할 때 ! 등등 무언가 발생하기 직전에 이벤트를 발생시킬수 있는그런 함수라고 생각하면 편하다우리가 props로 받아오는 값을 참조하거나 혹은use