[React] 수정 및 컴포넌트 작성과 props 작성

3. 소스코드 수정 방법

https://youtu.be/XQ-XqLVJBwg

src → index.js 가 메인 화면

index.js 일부

<App /> 은 무엇인가? 해당 태그는 import App from './App' 에서 온 함수이다. 즉, ./App 파일(App.js)에서 불러온 App함수이다.

App.js

보면 알겠지만, html형태의 코드가 있음을 확인할 수 있다. html 코드 처럼 수정할 수 있다. 또한, import './App.css'에서 스타일 정보를 받아온다.

개발자 모드로 사이트를 확인하면 기본 정보들이 작성되어있음을 알 수 있다.

F12 개발자 모드로 요소 확인

이 기본 정보들은 public 폴더 → index.html 에 저장되어 있다.

터미널 종료 : 터미널에서 Ctrl + C

빌드는 종료된 터미널에서 npm run build 후에 build 폴더에서 빌드된 정보를 확인할 수 있다.

또한 npx serve -s build 를 통해 빌드 폴더로 서버를 열 수 있다.

 

4. 컴포넌트 만들기

https://youtu.be/WT58gOl8Eh8

 

React는 사용자 정의 태그를 만드는 것이 본질이다. ( <App /> 과 같은... )

사용자 정의 태그는 곧 함수를 만드는 것이다.

사용자 정의 태그를 만들기 전 App.js

사용자 정의 태그의 맨 앞 문자는 반드시 대문자여야 한다.

Header 함수

return 값을 html 코드로 준다고 생각하면 된다.

자, 이제 사용자 정의 태그는 컴포넌트 라고 부름을 기억해두자.

컴포넌트는 이제 다른 함수에서 <Header></Header> 형식으로 사용된다.

컴포넌트를 이용한 App.js

원래의 App() 내용을 각각 함수로 작성해서 컴포넌트를 이용하여 짧게 만들었다.

기존 HTML 코딩과 다르게 함수를 이용하여 많은 부분을 빠르게 조정할 수 있다는 것이 바로 React의 본질이다.

 

5. props

변수 선언에 대한 내용도 포함시켜 놓았다.

https://youtu.be/t9e3hMJ_s-c

HTML은 태그에 속성을 부여할 수 있다.

이제 React의 컴포넌트에 속성과 같은 개념인

PROP을

 적용하려고 한다.

간단한 props를 적용한 App.js

함수에 인자로 props를 적어 넣은 후, 컴포넌트에 속성처럼 작성한 것이 props가 된다.

props는 해당 함수 안에서 변수처럼 사용가능 한데, 이때 중괄호 {} 안에 props를 적어주어야 한다. 중괄호는 이제 props 뿐만 아니라 변수를 쓸때 같이 쓰이게 된다. 

또한, props자체를 쓰는 것이 아니라, props.설정이름 으로 사용한다.

리스트를 이용한 props

변수는 const, let, var을 통해 정의한다. 또한 리스트(배열)은 대괄호 []로 정의한다.

* 추가적인 설명을 하겠다. var은 ES6이전의 과거 변수 정의 방법인데, var a = 1; for(var a = 2; a<5; a++){} // 최종적으로 a == 5 같은 중복 선언이 가능하여 값이 더럽혀지는 경우가 있을 수 있다.

let은 변수 재할당이 가능한 mutable한 변수이고, const는 변수 재할당이 불가능한 immutable한 변수이다(const t = ''; t='a'; 같은 것이 불가능. 리스트의 경우 push같은 함수를 이용한 변경은 가능). let, const는 var과 다르게 코드 블록내에서만 유효하여, 블록이 다르면 서로 영향을 주지 않는다.

 

이 리스트 또한 props로 줄 수 있으며, 변수이기 때문에 중괄호 {리스트명}를 포함하여 전달한다.

전달된 리스트 props는 props.리스트명 으로 일반 리스트처럼 사용할 수 있다.