리액트
-
state 개별 숫자 증가, props프레임워크/리액트 React 2023. 1. 19. 01:09
1. 과제 1-1. 반복문 처리 없이, 👍 클릭시 개별적으로 숫자 증가 구현하기 /*eslint-disable*/ //경고메세지가 뜨는 eslint 기능을 꺼준다. import './App.css'; import {useState} from 'react'; function App() { let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); let [좋아요, 좋아요변경] = useState([0,0,0]); let [modal, setModal] = useState(false); return ( ReactBlog {글제목[0]} { let good = [...좋아요]; good[0] = good[0] + 1; 좋아요변경(good) } }>👍 {좋아요..
-
map()프레임워크/리액트 React 2023. 1. 17. 01:33
리액트에서 반복문 처리 JSX에서 자바스크립트 사용시 중괄호를 쓰고, 안에다 입력한다.주로 사용했던 조건문인 if문 대신 {} 안에서 삼항 연산자를 사용했듯,반복문을 처리할 때는 for문 대신 map() 을 이용해 반복문을 처리해야 한다. array.map() ⭐반복문 사용 시 유용하다! array의 자료 개수만큼 함수 안의 코드를 실행해준다. 함수의 파라미터는 array 안에 있던 자료이다. return 오른쪽에 있는 것 array에 담아준다. //array.map(콜백함수); array.map(function() { 실행할 코드 }); [1,2,3].map(function(a) { console.log(a) // 1,2,3 순서대로 나옴 }); [1,2,3].map(function(a) { retur..
-
컴포넌트 생성, 사용하기프레임워크/리액트 React 2023. 1. 16. 18:23
컴포넌트 html은 사용이 많아지기 때문에 코드가 더러워지는 단점이 있다. 리액트에서는 이 부분을 해결하기 위해 컴포넌트를 만들어 사용한다. 뿐만 아니라 해당 컴포넌트를 보면, 어떤 기능을 하는지 명확히 알 수 있는 장점도 있다. → 가독성이 좋아지고, 코드의 재활용에 좋다. 1. 컴포넌트(component) 생성 function을 만들고, return() 안에 html 담기 쓰기 또는 1) 주의사항 다른 function 바깥쪽에 작성할 것 function 이름은 영문 대문자로 시작 (ex: Modal) return() 안에는 하나의 태그로 시작해 하나의 태그로 끝나야 함 → 여러개의 태그를 사용하고 싶을 때는 가장 바깥쪽에 로 감싸준다(fragment 문법) → 참고사이트 : https://ko.rea..
-
리액트 기본문법 JSX, state프레임워크/리액트 React 2023. 1. 14. 18:22
리액트 기본문법 리액트는 html 대신 jsx를 사용한다. class 사용 시, class 대신 className 사용 변수를 html에 사용하고 싶을 땐 {중괄호} - 데이터 바인딩 html에 style속성 넣고 싶을 때는 중괄호에 {} 자료형 사용, 속성은 - 대신 모든 단어 붙여씀 (font-size → fontSize) return 안에는 병렬로 태그 2개 이상 기입 금지 import './App.css'; // css 연결 function App() { let post = '강남 우동 맛집' //변수 선언 let data = 'red' return ( {/* class 지정(className 사용) */} 블로그 {/* 태그 내 인라인으로 속성 넣기 style = {{}}, html 태그 내 변..
-
리액트 설치 및 세팅프레임워크/리액트 React 2023. 1. 14. 17:49
1. 리액트 설치 및 세팅 우선 node.js 최신 버전을(왼쪽 안정화 버전 사용) 다운받아야 함 node.js 버전 확인은 터미널을 연 후 (ctrl + `) npm -v 작업할 폴더를 만든 후 powershell에서 프로젝트를 생성한다. (Create React App을 생성) 리액트 앱을 생성하는 방법은 npm과 npx 방식이 있는데, npm은 프로그램을 설치 npx는 프로그램을 임시로 설치한다.공식 문서에서는 npx 방식을 권장하며, npx는 컴퓨터 공간을 낭비하지 않고, 최신 버전을 유지할 수 있도록 해주는 장점이 있다. npx create-react-app blog //blog대신 임의의 프로젝트명을 입력해도 됨 //npm install -g create-react-app //create-re..