리액트 초기설정 & 기본문법(1)
리액트 (React)
본 포스트는 맥 OS, M3 버전에서 설치하였고, 출처는 코딩애플 (New 리액트) 채널을 참고하였다.
리액트 (React)를 배워야 하는 이유
- SPA (Single Page Application)을 만들 수 있음.
인스타 그램과 같이 화면 전환이 자유로운 것을 말함
- Component 를 활용해 HTML 재사용이 편리함.
- 데이터가 HTML에 자동으로 반영됨.
리액트 외에도 여러가지도 존재하지만, 리액트를 사람들이 제일 많이 사용함. 또한 리액트-네이티브를 활용해 앱 개발도 가능함.
개발환경 셋팅 & 리액트 프로젝트 생성
먼저 윈도우와 맥 공통적으로 1,2번 절차는 반드시 필요하다.
- Nodejs 검색해서 본인의 OS에 맞게 설치
- VSCode 에디터 설치
- [프로젝트 생성] : 작업용 폴더를 만들고, 그 폴더 내에서 터미널을 열기
- 열린 터미널에 아래의 명령어 입력
npx-create-react-app 프로젝트명
아마 높은 확률로 안될 것임. 그럴 때는 아래 방법 사용
윈도우(Window)
아마 ‘허가되지 않은 스크립트’ 라는 설명이 나올 것이다.
- PowerShell 을 관리자 권한으로 실행
- 그 이후에 아래의 명령어를 실행
Set-ExecutionPolicy Unrestricted
맥북(Mac OS)
터미널의 명령어 앞에 sudo를 입력하여 다시 실행 -> 그 이후 본인 패스워드 입력
sudo란?
- 유닉스 계열 OS에서 관리자 권한으로 실행할 수 있게 하는 명령어로 superuser do의 줄임말
- VsCode 에디터에서 [File] - [Open Folder] 를 통해 파일을 열어서 작업을 진행하면 된다.
npm start
아마 파일을 열었으면 아래의 사진과 같이 확인할 수 있을 것이다.
- node_modules : 라이브러리 코드 보관함
- public : static 파일을 모아두는 곳
- src 폴더 : 소스코드 보관함.
주로 App.js에서 코딩 (메인페이지)
- package.json : 프로젝트 정보
JSX 문법
폴더를 열고, App.js 파일에서 코딩을 하면 js 파일임에도 불구하고 html 파일도 작성이 가능한 것을 확인할 수 있다. 그 이유는 js 파일이 아니라, JSX 라는 새로운 파일임을 알 수 있다. 다음은 JSX 파일의 큰 중요 문법이다.
- class를 넣을 때에는 className을 활용해 적어줘야함.
CSS 파일의 작성을 위해서는 상단에 Import 'css파일 경로'를 적어줘야함.
- 변수를 넣을 때 {중괄호}를 사용하기(데이터 바인딩)
- 기존에는 변수를 넣을 때
document.querySelector{'a1'}.innerHTML
- 웬만한 곳에 다 사용이 가능하다.
EX) ID, src, className 등등..
- 스타일을 사용할 때의 주의사항
- 원래는 font-size를 사용했는데 jsx파일에서 ‘-‘ 기호는 수학적 기호로 해석하기에 fontSize를 사용한다.
- return() 안에는 병렬로 태그 2개 이상의 기입을 기피하는 것이 좋다.
위에 크게 4가지가 JSX 문법의 3가지이다.
주로 에러 메시지는 터미널이나 브라우저에서 확인하거나 개발자 도구를 통해 확인할 수 있다. WARNING 말고 ERROR에 주로 초점을 두어야하는데, WARNING 부분은 변수를 초기화하고 사용을 안할 때 사용되어서 아래의 명령어를 통해 WARNING 경고문을 안뜨게 할 수 있다.
eslint-disable
자료 저장하기
다음은 JSX 파일에서 자료를 저장하는 방법이다.
1. Let
let abc = 'java';
원래 javaScript에서는 var을 사용했는데, 여기서는 let을 사용한다.
let의 장점
- 변수 재선언이 된다. (var이나 const는 불가능)
- let으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.
요약 : 재할당이 필요한 경우엔 한정해 **let**을 사용하는 것이 좋다.
2. state
다음은 state를 사용하는 것이다.
문법 :
let[a, b] = useState('자료명');
만드는 방법은 다음과 같다.
- Import {useState}
- useState(보관할 자료)
- let[작명, 작명]
앞에 있는 작명은 변수랑 똑같다고 생각하면 된다.
- state의 장점
중간에 자료가 변경해도 ‘자동 렌더링’이 가능하다
즉, 굳이 다 사용하지 않고 잘 변경될 것 같은 자료(좋아요 수)에 주로 사용한다.
2 - 1. state의 변경
위 문법에서 a는 변수명이랑 같다고 하였고, 뒤에 있는 b는 state의 변경을 도와주는 함수이다. 따라서 문법은 아래와 같다.
state func( 새로운 state ) //func는 변경함수
이렇게 했을 때 뒤에 있는 변수가 있어야 재렌더링이 가능하다.
숫자, 문자열 상관없이 변경이 다 된다.
- state가 array / object 일 때
- 일부만 변경해도 가능하다.
EX) a[0] = ‘안녕’
-> 하지만, array/object에서의 변경에서는 원본을 보존하는 것이 좋다. 그래서 주로 2번의 방법을 사용한다.
- copy본을 만들어서 1번 방법 그대로 적용하기
여기에서는 아래의 문법이 사용된다.
[...변수명]
- copy를 만들 때 주의사항
기존 state와 신규 state(copy본) 이 같은 경우에는 JSX 파일 내에서 변경을 하지 않아준다.
shallow / deep copy의 개념
Component
이렇게 HTML을 사용하다보면 너무 코드 내에서 더럽다는 것을 확인할 수 있을 텐데 이를 해결하는 방법이 component이다.
<함수명></함수명>
<함수명/>
위 아래 중 하나 골라서 사용하면 된다.
- 방법
- function을 만들기
function App() 또 어떻게 보면 Component 이기에 App() function 외에서 정의 해주야 한다.
- return() 안에 HTML 내용을 담기
function 함수명() {
// HTML 내용
}
-
<함수명>
사용
return() 안에 HTML을 병렬기입하게 될 때, 의미없는 <div> 이 사용된다면 이는 <> </> 로 대신 사용이 가능하다.
- 사용하면 좋을 때
- 반복되는 HTML을 축약할 때 사용한다.
- 큰 페이지들을 전환하기에 좋다.
- 자주 변경하는 것들에 사용하기 좋다.
다음 리액트 관련 문법에 대해 실습하면서 알게 된것들 더 올리도록 하겠다.