※2021-하계-학교-스터디※ 0. 디렉토리 1. 컴포넌트 리스트, 게시글을 컴포넌트로 생각! 2. 코드 item.js (게시글 컴포먼트) // item.js // 게시판 컴포넌트 만들기 = [그림1]의 녹색 부분 import React, { useState } from 'react'; function Item({item}){ return ( {item.id} {item.title} {item.createdAt} ); } export default Item; 함수 Item의 매개변수 item은 properties속성으로 props라고도 불린다. 이 함수는 item을 받아서 해당 item의 id, title, createdAt을 박스에 담아 출력한다. list.js (리스트 컴포넌트) import Reac..

※2021-하계-학교-스터디※ 0. 디렉토리 구성 1. 카운팅 앱 +1을 누르면 숫자가 증가하고, -1을 누르면 숫자가 감소한다. → 이 앱을 컴포넌트로 분리해보자! 2. 필요한 컴포넌트 숫자를 담을 수 있는 박스 누르면 숫자가 증가하는 버튼 누르면 숫자가 감소하는 버튼 3. 코드 작성하기(counter.js) 변수 선언 const: 다른 값으로 초기화하지 않겠다 let: 흔히 사용하는 변수(값이 바뀜) 태그에서 변수를 불러올 때, 꼭 { }중괄호를 사용해줘야 한다. {}없이, num와 같이 적게 되면, 변수가 아닌 문자열로 인식한다. 태그의 onClick property(props) react에서 엘리먼트에 이벤트를 설정해줄때에는 on이벤트이름={실행하고싶은함수} 형태로 설정해줘야 한다. 그 중에서도 ..

※2021-하계-학교-스터디※ • HTML, CSS, JS • React.js란? 0. 디렉토리 구성 1. HTML/CSS/JavaScript 1.웹 사이트 개발 시 필수 요소 ① HTML: 웹 사이트의 뼈대를 구성 // 중요한 태그 : 다른 태그를 담을 수 있는 박스 : 제목 등을 작성하는 태그 ex) 안녕하세요 : 글을 담는 박스 ex) 안녕하세요 : 볼드체로 만들어줌 ex) 안녕하세요 : 버튼 ex) 버튼 ② CSS: 웹 사이트에 미적요소를 추가 ③ JS: 웹 사이트에 기능을 추가 2. React.js 1. React.js란? 웹 애플리케이션을 좀 더 편하게 만들 수 있는 라이브러리 리액트는 컴포넌트로 구성된다. 2. 컴포넌트란? 어떤 기능이나 목적을 갖고 있는 한 요소 또는 집합 3. 리액트 시작..