1. 실행 과정 이해
package.json에 scripts 안에 보면 start라고 쓰인 부분이 있다. 이게 뭘 실행시키냐면
바로 사진에 index.js라는 파일을 실행시킨다. 이렇게 되면 내가 npm start를 하면 index.js가 실행되는 것
그럼 이제 위에서부터 한줄씩 읽으면서 render 함수를 실행시킴
저기서 <React.StrictMode>는 지금 중요하지 않으므로 지우고 그럼 App이라는 것과 document.getElementById('root') 이 두 가지 arguments가 남는다.
App이라는건 하나의 문법인데 이걸 컨트롤+클릭해보면..?
아까 처음에 나왔던 그 App이다! 이걸 그리겠다는 뜻이다.
이렇게 적혀있는 문법을 JSX문법이라고 한다.
그리고 두번째 인자인 document.getElementById('root')는 어디에 그리겠다라는 뜻이다.
document는 모두 알다시피 css선택자를 찾는거고 getElementById는 id를 찾는거다.
ReactDOM.render(
<App />,
document.querySelector('#root')
);그렇다면 root라는 저 id를 어디서 찾냐..?
바로 여기 pulbic 폴더에 보면 index.html파일이 있다. 여기 파일에 root라는 id가 있다.
이렇게 불필요한 코드를 좀 지우면 아무것도 없는 파일인건데, 이 root안에 아까 봤던
요녀석을 집어 넣는다는 것이다.
결국 npm start를 실행시키면 index.js를 읽으면서 render함수를 실행시키는데 App의 return 값을 index.html에 root에 그리는거임.
뭐.. 부트스트랩 같은거 넣을거면 index.html 여기 head부분에 넣으면 됨
index.html에 root부분에 직접적으로 내가 뭘 입력할 순 없음 어차피 지워져서
2. 문법 이해하기(JSX 문법)
보통 js파일에는 var a = <div>안녕</div> 이런식으로 html코드를 넣을 순 없음.
근데 
이 코드를 보면 태그가 들어가 있다. 이렇게 JSX에서는 html코드를 자바스크립트 코드 안에 넣을 수 있다. 그래서 자바스크립트 코드만 관리하면 된다.
그리고 리액트에선 페이지를 이동한다는 개념이 다른 파일을 불러서 호출하는게 아니라 body부분만 바뀌는거임 - SPA(Single Page Application)이라고 한다.
그렇기에 a태그같은거를 쓸 수 없음. 이걸 대체하기 위한 태그들을 공부해야한다!
이제 본격적으로 기본 문법을 볼건데,
만약 아래 그림과 같이 App이라는 함수 안에 이미 div태그가 들어가있는데 또 다른 태그를 넣고 싶다.
그래서 h1태그를 넣었는데 에러가 난다..?
-> 기본적으로 JSX문법은 하나의 태그만 넣을 수 있다.
그럼 어떻게 해야 두개 같이 넣나..?
이런식으로 div안에 h1태그를 넣어버리면 된다.
이렇게 하나의 태그 안에 다른 태그들을 다 넣는다.
다음으로 변수를 만들고 싶은데 어떻게 만드나..?
자바스크립트는 모든게 1급객체이기 때문에 클래스 안에 감싸져 있을 필요가 없다. 그렇기에 이런식으로 변수를 만들 수 있다.
그리고 기본적으로 변수 선언은 let 혹은 const로만 한다.
그림과 같이 App function안에 hello function을 만들 수도 있는데 그 안에 var c = 20이라는 값을 할당 했다. 이 c는 다른데선 저 hello 안에서만 쓸 수 있겠지만 자바스크립트는 스코프가 좀 이상해서 저 c를 hello 스택 밖에서도 쓸 수가 있다. 하지만 저 var를 let으로 바꾸면 우리가 일반적으로 사용하는 변수처럼 쓸 수 있다. 즉 저 hello 스택 안에서만 쓸 수 있다.
const는 상수 let은 변수라고 하면 된다.
자, 그럼 자바스크립트 변수를 JSX문법 안에 넣으려면..?
이런식으로 괄호로 감싸 넣으면 출력이 된다.
다음은 if와 같이 조건문을 사용하고 싶으면..?
-> 기본적으로 JSX에서 if는 사용할 수 없다. 그렇기에 삼항연산자(조건?:값(true):값(false))를 사용한다.
이런식으로 조건을 사용 할 수 있다. 문자열은 홑따옴표(')든 쌍따옴표(")든 상관은 없긴한데 우리가 설정했던 프리티어때문에 자동으로 홑따옴표로 변경된다.
다음은 조건부 렌더링이라는 것이 있다.
위에 사진처럼 앞에 b===20이 참이면 &&뒤에가 출력이 되고, 거짓이면 출력이 안된다.
이건 b===10이기에 거짓이므로 뒤에 입니다는 출력이 안됨
다음은 그림과 같이 return 뒤에 소괄호가 있는데 이게 return <div>안녕</div> 이런식으로 한줄만 있으면 소괄호가 없어도 괜찮지만, 여러줄 이상일경우 괄호를 써줘야한다.
다음은 css디자인 하는 방법을 알아보자
1. 내부에 적는 방법
2. 외부 파일에 적는 방법
3. 라이브러리 사용(부트스트랩,component-styled)
이런식으로 내부에 적는 방법이 있음(추천x)
다음으론 이 app.js파일은 app.css파일과 연결되어 있으므로
app.css에 이렇게 스타일을 주고
이렇게 className을 지정해서 스타일을 입혀줄 수 있다. 여기서 주으할건 기존에 class라고 쓰는게 아니라 JSX 문법에서는 className이라고 해줘야 한다.
이번 게시물은 여기서 끝~
* 이 글은 유튜브 메타코딩 채널을 보며 공부한 내용을 기록한 게시글입니다
