React 맛보기

백엔드로 django REST API를 사용했으니 이를 프론트, 즉 react와 연동해보자!

현재 django REST API로 Post라는 모델을 만들고, CRUD까지 구현한 상태.

---

1. React 세팅

간단하게 react app을 생성할 수 있는 create react app을 사용하고자 한다.

이를 위해 우선 create react app을 설치! npm install create-react-app 으로 설치해주자.

흠... 안 된 것 같기도 하고, 잘 된 것 같기도 하고.

 

다음은 설치한 create-react-app을 이용해 react app을 설치! blogapp이라는 앱을 만들어줬다.

그럼 django-admin startapp과는 달리... 뭔가가 어마무시하게 이뤄진다.

당황하지 않고 쭉 기다리면...

Happy hacking! 이라는 메시지와 함께 앱이 만들어진다. 유쾌하고만.

 

앱도 잘 설치되었음을 볼 수 있다.

 

blogapp에 들어가 npm start !

 

그럼 시간이 쪼...금 걸리다가 페이지를 띄워준다!

 

와우! 처음으로 띄워본 React 페이지. 신기하구만.

 

2. JSX

JSX 코드란? JS의 확장 문법으로 XML과 매우 유사한 모양이다!

요 JSX형식으로 작성한 코드가 이후 하나로 합쳐지면서(번들링) bable-loader를 사용해 JS로 변환된다.

 

APP.js

HTML과 JS를 반씩 섞어둔 듯한 모양이다! 신기하구만.

작성 시 유의할 점 : 여러 요소가 있다면 부모 요소 하나로 꼭 감싸야만 한다!

위 코드에서도 <div>로 감싸지 않는다면 에러가 뜬다.

 

하지만 그렇다고 쓸데없는 곳에까지 div를 생성할 수는 없는 일.

이를 막기위해 리엑트v16부터는 Fragment라는 컴포넌트가 도입되었다.

즉 div 같은 것으로 감싸지 않고 여러 요소를 렌더링할 때는 컴포넌트와 함께 Fragment를 불러와 사용하면 된다!

 

JSX내에서 js의 if문은 사용할 수가 없다. 이런!

그 대신 {삼항 연산자} 형태로 사용이 가능하다. 위 경우 condition이면 → '보여주세요'를 띄우므로 &&를 사용!

 

{stlye}은 또 무엇?

react에서 스타일을 적용할 때는 문자열 형태가 아닌, CSS를 JS 객체 형식으로 만들어 적용해야 한다!

JS와 마찬가지로 camelCase(-없이 단어별 대문자 이름 붙이기) 형식을 사용해주자.

 

App.js

코드가 왕창 적히는 게 싫으니 이렇게 외부 CSS을 참조할 수도 있다(우리는 이미 위에 import './App.css';가 적혀있다).

App.css에서 이렇게 my-div라는 class에 스타일을 설정.

아차차. JSX에는 이미 클래스 컴포넌트를 생성하는 class란 키워드가 존재한다!

따라서 요소에 클래스를 지정해주고 싶다면 className을 이용.

 

또한 모든 태그가 닫혀있어야함을 명심해야한다!

input태그의 경우 html상에서는 닫지 않아도 되지만 JSX는 코드를 닫아줘야만 트리 형태의 구조가 만들어진다.

즉 에러가 안난다!!!