리액트 개념

1. 리액트 뼈대

처음 리액트 프로젝트를 생성하게 되면 여러가지 파일들이 생기게 되는데 나는 프로젝트를 생성하고 화면을 구성하는데 있어 필수적인 파일들만 얘기해보겠다. 처음 프로젝트를 생성하게 되면 아래 사진에 나와 있는 파일들 보다 훨씬 더 많은 파일들이 생성되는데 그것은 나중에 웹앱을 배포하거나 ServiceWorker와 같은 파일들이기 때문에 삭제하고 아래 파일들을 설명해보겠다.

우선 app.jsx파일은 c++에서 main함수와 같은 역할을 한다. 나머지는 다 페이지를 구성하는 source code일 뿐 실제로 화면에 표기되어지는 파일은 app.jsx파일이다. (처음에는 js파일로 만들어지나 여러 디자이너들과의 협업을 위해 react에서는 js코드이나 좀 더 css와 html에 가깝게 보이는 jsx를 지원한다.)

app.css파일은 app.jsx파일들에 쓰인 컴포넌트들에 css속성을 부여하는 파일이다. 이 파일에서 컴포넌트들을 더 예쁘게 꾸미거나 원하는 위치에 배치할 수 있다.

​

index.js파일은 외부 라이브러리를 import하거나 렌더링을 할 때 필요한 ReactDom클래스를 호출하는 파일이다.

​

리액트 돔이란?

리액트라는 것은 순수 js에서 좀 더 발전된 jsx 같은 것을 이용해서 component들을 만들어 나가는데 실제로 브라우저는 html, css, 순수 js만을 이해할 수 있다. 그래서 component들이 Babel이라는 것을 이용해서 순수js로 변환이 된다. 이렇게 변환된 것들(우리가 만든 컴포넌트들)을 html과 연결하는 작업을 해주는 것이 리액트 돔이다.

​

fontawesome의 아이콘을 가져다쓰거나 할 때 이 곳에 fontawesome의 주소를 import해주면 된다.

​

또한 우리는 src파일 내에서 새로운 jsx나 js파일을 만들어 새로운 컴포넌트들을 만들고 app.jsx에 추가할 수 있다.

처음 프로젝트를 생성하면 다음과 같은 파일들이 만들어진다.

 

---

2.리액트 프로젝트 기본 단위 컴포넌트

​

리액트는 컴포넌트라는 작은 단위들로 화면을 구성한다. 네이버 블로그를 예로 들자면

다양한 버튼들

저기 저장과 발행 버튼이 들어 있는 바 부분은 nav1(가명)이라는 컴포넌트로 구성할 수 있고 이 컴포넌트 안에 저장버튼과 발행 버튼을 만들어 둘 수 있다.

또 한 밑의 바 부분은 nav2( 가명) 이라는 컴포넌트 들로 안에는 모먼트와 글감 라이브러리 템플릿 기능을 처리할 수 있는 버튼들을 만들 수 있다. 항상 웹 개발에서 화면을 구성할 때는 부분으로 나누어 볼 줄 알아야 하는데 리액트는 이 화면이 나누어지는 부분을 컴포넌트라는 단위체로 처리한다.

​

컴포넌트는 class와 function으로 구성된다.

컴포넌트를 선언할 때는 클래스를 선언한 후 리액트에서 제공하는 component라는 클래스를 상속받아야한다. (js에서 상속 키워드는 extends이다.)

component의 기본 뼈대

vscode에서는 rcc+ tab버튼을 누르면 기본적인 리액트 컴포넌트의 뼈대를 자동으로 구성해준다. 리액트 컴포넌트의 구성을 보면 클래스 이름이 있고 이는 react가 제공하는 component라는 클래스를 상속받는다. 또한 render 함수 안에는 단 한가지만 리턴할 수 있다. 따라서 여러 개의 포함 관계가 같은 div태그나 관계가 동등한 여러 태그들을 동시에 return 할 수 없다. 따라서 우리는 의미 없는 <div> </div>태그로 모든 태그 들을 묶거나 아무 것도 적혀있지 않은 <> </> 태그를 최상위 태그로 설정해주어야 컴포넌트 렌더링이 가능하다.

​

리액트 컴포넌트는 객체 지향 언어에서 class가 자신만의 변수를 갖듯이 두 가지 형태의 변수나 함수를 가질 수 있다. 객체 지향 언어에서는 상속받은 변수나 함수와 자신 만의 변수나 함수를 구분하는 키워드는 존재하지 않지만

리액트에서는 이를 state와 props라는 속성으로 구분을 한다. props는 properties의 약자로 상위 컴포넌트에서 받아온 함수나 데이터를 의미하고 state는 그 컴포넌트 자체의 데이터를 의미한다.

​

state선언 방법

 

component의 state를 선언할 때는 class내부에 선언해주면 되고 props를 선언할 때는 이 컴포넌트가 쓰이는 태그 내부에 css처럼 선언해주면 된다.

​