본문 바로가기

React

 (8)
[React] 간단한 tab(탭) 만들기 (feat. checkbox 추가) 📌  들어가며간단한 tab (탭) 입니다.탭, checkbox(체크박스) 선택 시 해당 내용 노출 기능이 구현되어 있습니다.구현하면서 알게된 것들을 정리했습니다. 📌  구조 작성해보기1. 제공하려는 데이터 작성2. 제공된 데이터 title, nickName, communityCategoryCd 값 가져오기3. 2에서 가져온 값 화면에 뿌려주기4. 각각의 tab 버튼 클릭 시, 해당 내용 보여주기 (이때, tab 버튼 이름과 communityCategoryCd 를 비교해서 같은 것만 보여주기)4-1. 선택한 버튼의 현재 상태의 값을 useState 활용해서 저장4-2. 현재 선택된 버튼과 communityCategoryCd 비교해서 tab 내용 뿌려주기4-3. 버튼 클릭 시, 활성화되는 css 추..
[React] 간단한 투두리스트(todolist) 만들기 📌 들어가며간단한 일정 관리 todolist (투두리스트) 입니다.할일 추가, 삭제, 체크(할일 다함) 기능이 구현되어 있습니다.구현하면서 알게된 것들을 정리했습니다.  📌 todolist (투두리스트) 구성투두리스트의 컴포넌트 구조를 그림으로 그려봤습니다.App 안에 입력창, 할 일 목록들을 넣었습니다.JSX 형식으로 표현하면 아래와 같습니다.[App.js] //할일 목록 및 할 일 (ul - li)  📌 구조 작성해보기1. input 입력창에서 값을 받아서 업데이트(change)2. 입력값(value) 받기3. 등록 버튼 클릭해서 값 저장4. 입력값을 배열로 저장 (리스트 저장)5. input 입력값을 어딘가에 뿌려줘 (리스트를 보여줘)6. 뿌려진 목록에서 원하는 값을 선택 (checkbox..
[React] 노마드 수업 1-state, setState 등 소스 ★수업3-0 state state : 변하는 데이터를 관리하는 게 state야 class component는 return을 가지지 않아 대신 render를 가짐 따라서, render 안에 return을 쓴다 class component는 class이며, react component로부터 확장된다. react는 자동적으로 class component의 render method를 실행한다. state는 object이다. state에는 바꾸고 싶은 data를 넣는다. button에는 onClick이라는 prop이 기본적으로 있다. this.add()에서 ()는 즉시 함수를 호출해라는 것이고, this.add는 click했을 때만 함수를 호출하는 것이다. -function component와 class comp..
[React] 노마드 수업 1- 소스 과일 보여주는 예제 소스 import React from 'react'; import PropTypes from "prop-types"; const foodILike = [ { id: 1, name: "apple", image: "https://i.pinimg.com/564x/9e/10/13/9e1013ce992236f9a7b4eb1100d53ef8.jpg", rating: 5 }, { id: 2, name: "banana", image: "https://i.pinimg.com/564x/a5/0c/e6/a50ce6c1cef934d3b1eb3a5b78afc206.jpg", rating: 4 }, { id: 3, name: "watermelon", image: "https://i.pinimg.com/564x..
[React] 노마드 수업 1 ★수업2-1 JSX javascript와 HTML 사이의 언어를 jsx라고 부름 component는 HTML을 반환하는 함수 react는 component를 사용해서 HTML처럼 작성하려는 경우가 필요 javascript와 HTML 사이의 이러한 조합을 jsx 라고 부름 prop-types 내가 전달받은props가 내가 원하는 props인지를 확인해주는 것 React에서 타입 체크를 위해서 사용되는 라이브러리 npm i prop-types // prop-types 설치 [설치 확인] package.json 파일에서 dependencies": 부분 아래 prop-types가 있음 [파일 정리] App.js 파일에 import PropTypes from "prop-types"; 추가 isRequired : ..
[React] 설치 및 시작하기 - 노마드 수업 정리 개발 환경 설치 1. nodejs 설치 https://nodejs.org/ko/download/ node -v // nodejs 설치 확인 npm -v // npm 설치 확인 (nodejs 설치하면 같이 옴) 2. npx 설치 npm install npx -g // npx 설치 npm install -g npm // 업데이트 npx -v // 설치 확인 3. git 설치 https://git-scm.com/downloads git -v // git 설치 확인 git --version // 버전 확인 시작하기 1. create-react-app 터미널에서 폴더 만들 곳으로 들어가기 cd Documents // 해당 위치에 폴더를 만들 예정 react 프로젝트 만들기 (폴더 이름과 동일) npx create..
[React] 설치 및 시작하기 개발 환경 설치 1. nodejs 설치 https://nodejs.org/ko/download/ node -v // nodejs 설치 확인 npm -v // npm 설치 확인 (nodejs 설치하면 같이 옴) 2. npx 설치 npm install npx -g // npx 설치 npm install -g npm // 업데이트 npx -v // 설치 확인 3. git 설치 https://git-scm.com/downloads git -v // git 설치 확인 git --version // 버전 확인 시작하기 1. create-react-app 터미널에서 폴더 만들 곳으로 들어가기 cd Documents // 해당 위치에 폴더를 만들 예정 react 프로젝트 만들기 (폴더 이름과 동일) npx create..
#React #React 리액트는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여준다. : 페이스북에서 제공하는 프론트엔드 라이브러리이며, 컴포넌트 기반으로 되어 있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI를 만들어 사용자에게 보여진다. - 웹 페이지를 만들기에는 html, css로도 충분하지만 html, css 만으로 동적인 데이터를 UI에 뿌려주기에는 적합하지 않다. 이 때 리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 손쉽게 만들 수 있기때문에 리액트를 사용한다. : 이 라이브러리는 Virtual DOM 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저인터페이스를 렌더링한다. 따라서, 최소한의..

티스토리툴바