FE37 [React] React 복습 5(e.target.value) map map 내장 함수를 쓸 때 key 붙이면 warning이 안 생깁니다. { 글제목.map(function(a, i){ return ( { 누른제목변경(i) } }> { a } { 업(따봉 + 1) } }>👍 { 따봉 } 2021년 8월 2일 작성 ) }) } e.target.value (e) => {e.target.value} { 입력값변경(e.target.value) } } /> { let 글제목사본 = [...글제목]; 글제목사본.unshift(입력값); 글제목변경(글제목사본) } }> 입력 1. 입력창 input에다 onChange를 붙여서 타이핑 할 때 이벤트를 줍니다. 2. e.target.value를 이용해서, 입력하는 값을 그대로 받습니다. 3. 버튼에 onClick을 붙여줌으로써, .. 2021. 8. 3. [React] React 복습 4 알림 본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다. 복습 JSX: HTML 대신 JSX 사용하기 노란색 테두리: App.css에 작성한 내용을 import로 불러오기 주황색 테두리: img 태그에 { logo }로 불러오기 빨간색 테두리: p 태그에 변수 post를 { post }로 불러오기 state: 변수 말고 state 만들어 쓰기, 리액트의 데이터 저장 공간 state를 사용하는 이유? 웹앱을 만들기 위해, 웹이 App처럼 동작하게 만들고 싶어서다. state에 데이터 저장해놓는 이유? HTML이 자동으로 재랜더링이 된다. 배열로도 등록이 가능합니다. 따봉을 누르면 숫자가 올라가는 이벤트를 등록해 줄 겁니다. state를 하나 만들어 줍니다. useSt.. 2021. 8. 2. [React] React 복습 3 알림 본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다. 복습 개요 직전에 인프런 무료 강의를 보고 Node JS부터 React까지 그저 따라만 하며 공부하고 그것을 올렸는데요. 이론부터 접근하는 것보다 이 분야는 무작정 해 보면서 틀리는 것을 반복하는 게 더 공부 비결이라 생각되어, 하나도 모르는 상태에서 강의를 진행 했었습니다. 결과적으로 그 방법도 옳았지만, 인간적으로 너무 모르는 거 투성이기 때문에, 우선 시작했으니 완강을 한 후에 입담이 굉장히 좋으신 애플 코딩 님의 리액트 강의도 보게 됐습니다. 강의 개수는 7개로 적은 편이기 때문에(아마 유료 강의는 더 있을 것으로 생각합니다.) 인프런 React 유튜브 클론 코딩과 병행을 하거나, 그 이전에 완강 하기.. 2021. 8. 2. [React] 회원가입 페이지 개발 알림 본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다. RegisterPage.js path='/register'로, 경로를 지정해줬기 때문에, 입력 후 회원가입 페이지로 넘어와 회원가입 페이지를 만들어 보겠습니다. 로그인과 다르게, 회원가입 창에서는 이메일과 비밀번호를 제외하고, 이름과 비밀번호 확인해주는 기능까지 두 개를 더 만들어 총 네 개여야합니다. 대부분의 것들을 로그인 페이지를 만들던 파일에서 복사해 왔고요, 나머지 소스코드들처럼 추가적으로 작성해주고 수정할 건 수정해 줬습니다. 노란색 테두리는 작성한 state인데요. 회원가입 페이지에서 사용 할 이름과, 비밀번호 확인을 위한 state를 만들었습니다. 지난 포스팅(로그인 페이지 만들기)에서 작성하지 .. 2021. 8. 1. [React] 로그인 페이지 개발 알림 본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다. App.js 화면에 보여지는 곳입니다. path="/ ~ "는 뒤에 붙은 텍스트를 치면, 지정해준 component로 이동하는 것입니다. 예를 들어, localhost:3000을 접속하면 가장 먼저 뜨는 시작 페이지(LandingPage)는 App.js에서도 보시는 바와 같이, path에 아무것도 값이 입력되어 있지 않기 때문에 localhost:3000으로 접속하면 가장 먼저 보이는 화면인 것을 알 수 있습니다. 밑에는 path='/login'을 입력해줬기 때문에, localhost:3000/login을 입력하면 LoginPage로 가도록 component를 지정해준 것을 확인하실 수 있습니다. 이처럼요. 2021. 7. 31. [React] React 복습 2 알림 본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다. And Design https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design 설치 방법은 아래와 같습니다. 1. 리액트 클라이언트에서 npm install antd --save를 통해 설치 2. clinet > index.js에서 import 추가 Redux: predictable state container for JavaScript apps의 약자로 상태 관리 라이브러리를 의미한다. 리액트에선 Props와 State 두 개가 있다. 설치 받아야 할 것들 1. redux 2. react-redux.. 2021. 7. 30. 이전 1 2 3 4 5 6 7 다음
