개발일지/React & C++ (7) 썸네일형 리스트형 [C++] 참조 참조 : 포인터와 유사한 개념. '*'인 포인터와 다르게 참조는 '&' 기호를 사용한다. int a = 10, b = 20; int &aRef = a;// aRef는 정수형 변수 a에 대한 참조 cout [C++] 포인터 포인터 다른 변수, 구조체, 객체 등 가리키는 변수로서 메모리의 주소와 직접적으로 연관 #include using namespace std; int main() { int a = 10; int* ptr; // 아직 아무것도 가리키지 않은 위험한 상태 ptr = &a; // 주소를 넣어 줌 cout [React : 05] Component https://youtu.be/bq2SjODrhJQ ※주의※ - 우리는 html 코드를 return() 안에 짜고 있다. return 안에는 항상 하나의 태그만 시작하고 끝내야 한다. return ( 이 건 가 능 ); return ( 이 건 불가능 하 다 ) - HTML을 한 단어로 줄여서 쓸 수 있는 방법 : 리액트의 Component 문법 - function App() 이곳이 끝나는 괄호 아래에 Modal() 함수를 만들고 return 안에 원하는 HTML을 작성하면 끝! - 태그를 부를 땐 이렇게만 해줘도 된다! Component - 이름은 대문자로 시작한다. - return() 안에 있는 건 태그 하나로 묶어야 한다. ex) - return() 내부를 묶을 때 의미 없는 를 쓰기 싫다면 이렇게 .. [React : 04] 이벤트 리스너 ( 좋아요 버튼 ) https://youtu.be/Br9fKSIeAok [ 저번 시간 답안 ] import React, { useState } from 'react'; import './App.css'; import logo from './logo.svg'; function App() { let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '응암 고기 맛집']); let ftStyle = { color : 'wheat', fontSize : '30px'} return ( 개발 Blog { 글제목[0] } 2월 17일 발행 { 글제목[1] } 2월 17일 발행 { 글제목[2] } 2월 17일 발행 ); } export default App; 이렇게 했을 때 터미널에 Compiled .. [React : 03] state를 이용해 글 목록 만들기 변수에 데이터를 저장하고 데이터 보관할 때 옵션이 두 개가 있다. 1 데이터는 변수에 넣거나 2 state를 사용하거나 상단 import에 아래를 추가한다. import React, { useState } from 'react'; - 리액트에 있는 내장 함수를 사용 let [a, b] = useState('남자 코트 추천'); - 이 함수를 실행하면 [a, b] 이렇게 두 개의 데이터가 있는 array가 남는다. - ES6 신 문법 : destructuring 문법 - 설명 전에 아래 설명 참고 var [a, b] = [10, 100]; 이 두 개의 데이터를 각각의 변수에 담고싶다면? a에는 10을 넣고, b에는 100을 넣는다. 이것이 바로 destructuring(디스트럭터링) let [글제목, 글제.. [React : 02] JSX https://www.youtube.com/watch?v=FqnAFX9lQPQ 강추 합니다! - React에서는 html 대신에 JSX 라는 문법을 사용한다. - class가 아니라 className을 사용하는 이유 : JavaScript에서 class라는 예약어가 있기 때문에 React는 이처럼 조금씩 문법이 다르다. - html과 거의 비슷한데 왜 html+css 대신에 React를 사용하느냐? 데이터 바인딩을 쉽게 할 수 있다. * 데이터 바인딩 : 서버에서 받아 온 데이터를 자바스크립트로 저장한 다음 HTML에 꽂아 넣는 작업 {중괄호}를 이용해서 쉽게 바꿀 수 있기 때문! React, Vue, Angular를 사용하는 이유도 바로 이것 때문이라고 한다. import './Ap.. [React : 01] 세팅 1. 비주얼스튜디오를 다운 받고 구글에서 React.js 검색 후 가장 최신 버전 다운로드 2. 비주얼 스튜디오에서 설치할 폴더 지정 후 3. 터미널창에 이것을 입력한다. npx create-react-app blog(프로젝트명) npx - 라이브러리 설치를 도와주는 명령어 create-react-app - 리액트 세팅이 다 된 boilerplate (프로젝트를 한 번에 설치할 수 있도록 도와줌) blog - 프로젝트 이름 엔터치면 설치~~ 폴더를 열어서 src - App.js 이곳에서 코딩을 시작하면 된다. 미리보기를 키고 싶다면? - 터미널 npm start https://create-react-app.dev/ Create React App Set up a modern web app by runnin.. 이전 1 다음
