react_tutorial
-
react에서 map함수 사용법react_tutorial 2022. 3. 29. 23:39
안녕하세요. 오랜만에 돌아왔습니다. map함수를 사용해보도록 하겠습니다. 일단 간단하게 새로운 react프로젝트를 만들어주고 src파일에 component파일을 만들어서 Page.js파일을 하나 만들어 줍니다. map함수를 사용하는 예시를 들기 위해서니까 간단한 형식으로 만들어 줍니다. 이제 App.js를 보도록 합시다. map함수를 안 썼을 때를 먼저 보도록 합시다. state에 page라는 배열 변수를 넣어주고 Page Component에 넣어주도록 합시다. map을 사용하지 않으면 저렇게 Page태그를 여러개 사용해줘야 합니다. 지금은 예시로 3개만 넣었지만 만약에 몇 만개의 데이터를 넣어야 한다고 생각하면 어떻습니까? 골치가 아파집니다... 이제 map함수를 사용해봅시다. Pagearr이라는 상수..
-
React Delete Componentreact_tutorial 2021. 9. 11. 10:31
안녕하세요 여러분 드디어 tutorial CRUD의 마지막인 Delete에 도달했습니다. 짝짝! delete component까지 만들면 여러분은 이제 어디 가서 "나 리액트 좀 만져봤다"라고 할 수 있지 않나...라고 생각합니다. 물론 여러 번, 그리고 깊숙이 코딩을 해보면서 리액트에 익숙해져서 네이티브가 되려면 앞으로도 더 열심히 해야겠죠? 힘들지 않은 건 없어요. 노력을 하지 않은 성과물은 기억에도 안 남고 성취감도 크게 느껴지지 않아요. 저도 원래는 CRUD까지만 만들고 튜토리얼 카테고리를 끝내고 이제 제 리액트 프로젝트를 시작해보자!라고 생각했는데... 이왕 하는 거 sqlite를 써서 데이터베이스까지 한번 가볍게? 적용시켜 보고 부트스트랩까지 코드에 적용시키자! 생각하게 되었습니다. 저도 열심..
-
React Update Componentreact_tutorial 2021. 9. 11. 02:33
안녕하세요! 오랜만에 리액트 튜토리얼 포스팅입니다. 최근에는 Flask, EC2, RDS를 이용하여 사이트를 배포하는 실습을 하느라 잠깐 리액트 실습을 못 해보고 있었습니다. 저번 포스팅에서는 Create 컴포넌트까지 생성해 보았습니다. 이번 포스팅에서는 제목과 같이 Update 컴포넌트를 만들어 보았습니다. Update 컴포넌트는 쉽게 보고 있었는데 생각한 대로 코딩을 해도 계속 오류만 떠서 시간이 더 걸린 것 같습니다. 그럼 거두절미하고 시작해봅시다. create와 동일하게 update 또한 컴포넌트를 컨트롤하기 위해서 state에 update변수를 하나 넣어주도록 합시다. 제 목적은 update버튼을 누르면 state의 update가 true로 바뀌면서 Read컴포넌트가 아닌 Update컴포넌트를 ..
-
React Create Componentreact_tutorial 2021. 9. 5. 02:56
저번 포스팅에서 state를 이용해서 Create Component를 꺼냈다가 집어넣었다가를 해봤었죠. 이번 포스팅에서는 state와 props, 그리고 함수를 이용해서 실제로 state에 있는 data변수에 값을 추가해서 Read Component에 띄워보도록 합시다! 말로 해보면 굉장히 어려워 보이지만 생각보다 쉽고 흐름이 잘 보입니다. 단지 이름을 따라가면서 한번 해보도록 하죠! 먼저 저희 Read.js 코드는 단순히 content [0]과 같이 배열을 하나하나 태그에 넣어 줬었습니다. 하지만 data의 개수가 늘어난다면 그에 맞춰서 출력을 해줄 필요가 있습니다. 코드를 좀 바꿔주도록 합시다. 크게 바뀐건 없습니다. 새로운 변수로 list라는 배열을 추가해줬고 for문을 content의 길이만큼 돌..
-
React Props와 Statereact_tutorial 2021. 9. 4. 04:33
전 포스트에서 Component를 만들어 봤었죠. Read.js를 통해서 App.js에 태그를 적용시켜 간단한 태그를 출력해봤습니다. 그렇다면 출력을 바꿔주기 위해서 매번 Read.js를 바꿔줘야 할까요? 그렇게 한다면 너무 비효율적인 데다가 만약에 다른 js파일에서 Read Component를 사용한다면 그곳의 값도 같이 바뀌는 불상사가 일어나겠죠. 그래서 저희는 props를 이용할 겁니다. props는 태그의 속성이라고 저는 이해하고 있습니다. 예를 들어, 태그에 href라는 속성이 있는 것과 같이 Read라는 Component에 속성을 부여해주고 해당 Component에서 그 속성에 접근할 수가 있습니다. 그 속성이 바로 props입니다. 한번 사용해 보도록 합시다! 사진과 같이 Read Compo..
-
React Componentreact_tutorial 2021. 9. 3. 00:41
이전 포스팅까지 해서 어떻게 리액트 프로젝트를 만들고 기본 구조에 대해서 기록해봤습니다. 이번 포스팅에서는 Component에 대해서 기록해 볼 겁니다! 저는 이 Component라는 것을 내가 만드는 하나의 태그라고 이해했습니다. 하나의 사용자 지정 태그를 만들어 내는 것이고 기존에 App.js 또한 마찬가지로 하나의 Component라고 생각합니다. 먼저 말씀드리자면 제 react_tutorial은 CRUD(creat, read, update, delete)를 구현하는 것을 목표로 합니다. 그러므로 먼저 read component를 만들어 보겠습니다 src파일 아래 component라는 폴더를 만들고 안에 Read.js파일을 만들어줍니다. 먼저 import react를 해준뒤 클래스 형태로 Read클..
-
react 개념(학생 시점)react_tutorial 2021. 9. 2. 16:59
react란 프론트엔드 라이브러리로 좀 더 자유롭고 코드의 재활용을 통해서 더 간편하고 예쁘게 홈페이지를 만들 수 있는 프레임워크로 알고 있습니다. html에는 여러 가지 태그들이 있습니다. body, head, div, span, input, p 등등 많은 태그들이 있습니다. 하지만 이러한 태그들은 html에서 정해놓은 양식에 맞춰서 입력하고 그에 맞춰서 출력을 해줍니다. 리액트를 이용하면 사용자 지정 태그를 만들 수 있습니다. 예를 들자면 게임 캐릭터를 커스터마이징 하는 것 같이 사용자가 원하는 형태의 태그를 만들 수 있다는 것입니다. 이 사용자 태그를 이용하면 엄청 긴 코드라고 해도 재사용을 이용하여 아주 간결하고 보기 쉽게 만들 수 있습니다. 리액트 프로젝트를 만들어보면 굉장히 어지럽습니다. 처음..
-
react 초기설정react_tutorial 2021. 9. 2. 15:12
안녕하세요 먼저 초기 설정부터 기록해보겠습니다. 1. nodejs홈페이지로 이동하여 nodejs 다운받기 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 메인 페이지에서 보시면 LTS버전과 최신 버전이 있습니다. LTS버전은 완전히 점검이 종료된 안전하고 확실한 버전이고, 최신 버전은 현재까지 개발된 버전입니다. 둘 중 무엇을 받던 상관없습니다. 저는 최신 버전을 받았습니다. 설치를 완료한 후 cmd창에서 node -v 명령어를 치면 nodejs의 버전을 확인해 볼 수 있습니다. 2.npm 사용하기 npm이란 Node Packaged Manager의..