React || part1 블로그 제작 및 기초 문법_01
React 란?
: React는 사용자 인터페이스(UI)를 만들기 위해 사용되는 자바스크립트 라이브러리이다.
왜 사용할까??
: 핸드폰에서 사용하는 app처럼 부드럽게 동작하는 html 페이지를 만들기 위해!
: 물론 javascript로만 만들 수 있지만, 코드가 너무 복잡해지고 길어진다.
장점
1. single page application
2. html 재사용 편리(html의 양이 많은 사이트 같은 경우 )
3. 같은 문법으로 모바일 app 개발도 가능!(물론 react native로, 하지만 문법이 살짝만 달라서 react 문법만 잘 익혀두면 사용하기 좋다고 한다.)
개발환경 셋팅하기
1. node.js 설치
2. vscode 에디터 검색해서 설치(난 이미 사용 중)
프로젝트 생성
1. 작업용 폴더 만들기(나는 react_practice라고 만듦)
2. (mac기준) 터미널 켜서 해당 폴더 들어간 상태에서 'npx create-react-app react_practice'라고 치면 설치됨
>> 권한 관련 에러가 뜨면 앞에 위에 터미널 적은 거 앞에 sudo 추가하고 다시 치면 설치된다.
vscode 들어가서 작업용 폴더 열고 나서 src/App.js가 보통 작업하는 곳이라고 생각하면 된다.
작업한 것을 보고 싶을 땐 터미널창에 npm start라고 치면 된다.
그냥 오류 없이 바로 되는 경우도 있지만 바로 된다면 재미없지..
이런 오류가 떠서 찾아보니 역시나... 권한이 없어서 발생하는 문제인 거 같다.
그래서 터미널에 권한 부여를 하면 된다고 하는 거 같아서
'sudo chown -R $(whoami) /Users/kimjonghyeon/Desktop/github/KDT_web_8/react_practice'
후 실행하니 잘 된다!
일단 이렇게 하면 되고, 생성된 폴더에 대해 짧게 소개하자면
node_modules : 프로젝트 구동이 필요한 모든 라이브러리 소스를 모아놓은 곳
public : static 파일 모아두는 곳(html, img 잠깐 보관하는 정도의 용도)
src : 코드 짜는 곳(소스코드 보관함 )
>> 여기서 궁금할 수 있는 부분!
>> 보통 웹페이지는 html 구성이 있어야 하는데 여기에선 js 파일에만 작성해도 웹페이지가 잘 보이는 이유는??
>> 쉽게 표현하자면 app.js에 있는 코드를 index.html에 집어넣어 주세요!라는 역할을 하는 것이 있어서 그렇다(index.js파일이 그 역할을 함)
그리고 package.json : 프로젝트 정보가 담겨 있다.
react에서 레이아웃 만들 때 쓰는 JSX 문법 3개
JSX 란?
: Javascript에 XML을 추가한 확장한 문법
원래 react에서 <div>를 만드는 법 : React.createElement('div',null,'hello world') 이렇게 만들어야 하나
JSX를 사용해서 <div>를 만드는 법 : <div></div> 이렇게 만들면 된다.
1. class를 넣을 땐 className이라고 넣어야 함!
그리고 물론 css 파일을 따로 관리하고 싶으면 import "./App.css" 이런 식으로 연결해서 쓰면 된다.
2. 변수를 넣을 땐 {중괄호} !(데이터바인딩은 {중괄호})
위에 괄호 안에 있는 건 앞에 있는 말이랑 똑같은 말이다.
이렇게 만들 수 있지만, 변수를 이용한다면
이런 식으로 만들 수 있다.
3. style 넣을 땐 style={{스타일명 : '값'}}
주의할 점은 html, css에서 font-size 이런 형태이지만, javascript에서 -은 진짜 뺄셈이라고 생각하기 때문
그리고 camelCase 형식으로 fontSize라고 써주면 된다.
중요한 데이터는 변수 말고 state에 담는다.
html 요소를 넣을 땐 return () 소괄호 안에 다 넣어야 한다.
소괄호 안에 적을 땐 병렬로 태그 2개 이상 기입 금지!
중요한 자료를 저장할 땐 변수를 사용하면 된다.
하지만 state로도 자료를 저장 가능하다.
방법
1. 상단에 import{useState} 만들고
2. useState(보관할 자료)
3. let [작명1, 작명2] >> 작명1은 state에 보관한 자료, 작명2는 state 변경을 도와주는 함수
: 사용할 때도 {a} 이런 식으로 사용
(참고용) Destructuring 문법이란?
: 배열이나 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게 하는 ES6 문법
ex) let num = [1, 2]; 가 있을 때 이 배열 안에 있는 1, 2를 변수로 빼고 싶을 때!
let a = num[0];
let c = num[1];
혹은
let [a, c] = [1, 2];
변수와 state의 차이!
변수는 변수가 갑자기 변경되면 >> html에 자동으로 반영이 안 된다.
state는 변수가 갑자기 변경되어도 >> html에 자동으로 반영(재랜더링)된다!
그러므로 변수 변경 시 자동으로 html에 반영되게 만들고 싶으면 state를 써야 한다.
state를 하나하나씩 만들어도 되고, 배열로 만들어서 사용가능하다.
React 배우면서 느낀 점은 '와 정말 쉽고 빠르게 원하는 코드 작성이 가능하겠다'라는 점이었다. 새로운 것을 습득하는 속도가 좀 느린 나로선 교육 시간에 처음 듣는 것보다, 미리 한번 보고 나서 교육 때 들으면 좋겠다는 생각이 들었는데, 마침 스터디가 만들어져서 선행학습 관련된 블로깅을 하게 되었다. 매우 좋다!
일주일에 2개씩은 꼭 React 관련 블로깅을 하기로 하였으니, 열심히 한번 해보자