React.js 기초 by 코딩 애플 (6) 썸네일형 리스트형 리액트 6강 : div 너무 많으면 Component [ 컴포넌트 만드는 법 ] 1. function 만들고 2. return ( ) 안에 html 담고 3. 쓰기 *참고1 : return ( )안에 html 병렬기입 하려면, 제목 날짜 상세내용 두개의 div를 또 다시 div로 감싸주면 됨. 리액트 5강 : state가 array/object면 [state 변경 함수 특징] : 기존 state == 신규 state의 경우 변경 안해줌. * 변수1 & 변수2 화살표가 같으면, 변수1 == 변수2 비교해도 true가 나옴. [ array / object 특징 ] array / object 담은 변수엔 화살표만 저장됨. let arr = [1,2,3] function App() { let post = '강남 우동 맛집'; let[글제목, 글제목변경] = useState(['남자 코트 추천', '여자 코트 추천', '아이 코트 추천']) let [따봉, 따봉변경] = useState(0); return ( ReactBlog { let copy = 글제목; 리액트 4강 : 버튼에 지리는 기능만들기 * 좋아요 버튼 & 갯수 UI 만들기 - 좋아요 숫자는 변경이 자주 일어나기 때문에, state로 만들어 보기 function App() { let post = '강남 우동 맛집'; let[글제목, 글제목변경] = useState(['남자 코트 추천', '여자 코트 추천', '아이 코트 추천']) let [따봉, 따봉변경] = useState(0); return ( ReactBlog { 글제목[0] } 👍 { 따봉 } let [따봉, 따봉변경] = useState(0); return ( ReactBlog { 글제목[0] } { 따봉변경(따봉+1) } }>👍 {따봉} 글수정 2) 이렇게도 가능하지만, 더 개발자스럽게 하기 위해서는, { 글제목[0] = '학생 코트 추천'; 글제목변경(글제목); } }>글수.. 리액트 3강: state쓰면 좋은점? * 자료 잠깐 저장할 땐 변수(let, var, const) 사용 let post = '강남 우동 맛집'; - React에서 자료 잠깐 저장할 땐 state 써도 됨. * useState 만드는 법 1) useState라고 입력하고 엔터를 치면, 상단에 import { useState } from 'react'; 라고 자동 입력됨 2) useState(보관할 자료) 입력 후 3) let[작명, 작명] let [a,b] = useState('남자 코트 추천'); * useState 사용법 이런식으로 변수처럼 사용이 가능, 하지만 중괄호 { } 로 표기해야 함 { a } 여기서 a는 '남자 코트 추천'을 가르키고, b는 변경할 내용을 담음 let [a,b] = useState('남자 코트 추천'); * 참고.. 리액트 2강 : JSX 문법 (3가지) - 터미널에서 npm start 입력 후 시작 문법 1. className - class 넣을 땐 className이라고 작성해야 됨 (html에서 처럼 class라고 사용하면 안됨) function App() { return ( 리액트 1강 : 리액트 설치법 HTML/CSS 기초지식 필요 JAVAScript 기초지식 필요 var if function for [] {} 1. 개발 환경 세팅 Node.js 다운 VS CODE 다운 2. React project 생성 1) 작업용 폴더 만들고 shift + 우클릭 2) PowerShell/터미널 열기 누름 3) 열린 터미널에 npx create-react-app 프로젝트명 기입 (예_ npx create-react-app blog) * 맥북의 경우 sudo npx create-react-app 프로젝트명 더보기 더보기 3. VS CODE 에디터에서 File - Open Folder로 blog 폴더(프로젝트명) 오픈 4. 미리보기 띄우기는 터미널에서 npm start (VS CODE 상단 탭에 Terminal - n.. 이전 1 다음
