React란
React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript라이브러리이다.
Component라고 불리는 작고 고립된 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.
React Component
-리액트로 만들어진 앱을 이루는 최소한의 단위이다
-Component의 이름은 항상 대문자로 시작한다.(소문자로 시작하는 컴포넌트는 리액트에서 DOM태그로 취급한다)
-props를 input하고 UI가 어떻게 보여야 하는지 정의하는 React Element를 output하는 함수이다.
함수형 컴포넌트
가장 간단하게 컴포넌트를 정의하는 방법으로 자바스크립트 함수를 작성하는 것이다.
function App () {
const name = "react";
return (
<div> {name} </div>
);
}클래스형 컴포넌트
함수에서 클래스로의 변환
1.React.Component를 확장하는 동일한 이름의 ES6 class 생성
2.render()라고 불리는 빈 메서드를 추가
3.함수의 내용을 render() 메서드 안으로 옮김
4.render() 내용 안에있는 props를 this.props로 변경
5.남아있는 빈 함수선언을 삭제
class App extends React.Component {
render() {
const name= "react";
return (
<div> {name} </div>
);
}
}
함수형 컴포넌트와 클래스형 컴포넌트의 역할은 동일하다.
차이점은 클래스형 컴포넌트의 경우 state, life cycle기능을 사용할 수 있고, 임의 메서드를 정의할 수 있다. 반면 함수형 컴포넌트는 클래스형 컴포넌트보다 선언이 좀더 편하고 메모리자원을 덜 사용한다는 장점이 있다.
앞선 state, life cycle api를 사용할수 없다는 단점은 리액트 훅의 도입으로 해결되었다.
JSX(JavaScript XML)
JSX는 리액트로 프로젝트를 개발할 때 사용됨으로 공식적인 자바스크립트 문법은 아니다.
브라우저에서 실행하기 전에 babel을 사용하여 일반 javascript형태의 코드로 변환된다.
JSX는 하나의 파일에서 javascipt와 html을 동시에 사용하여 작성하여 편리하다.
JSX안에서 Javscript표현식을 작성하려면 JSX내부에서 코드를 {}로 감싸주면 된다.
JSX에서는 class가 아닌 className을 사용한다.
cf) Babel is a JavaScript compiler
바벨은 javascript로 결과물을 만들어 주는 컴파일러이다.
+더알아보기 ) polyfill
그외 알아두어야 할 기본문법
-최상위 태그는 반드시 하나여야 한다. 즉, 두개이상의 태그는 항상 하나의 태그에 담겨 있어야 한다.
const App =(
<div>
<Title> How to study React <Title />
<Form />
<MainCard img="./imgAdress"/>
<Favorites />
</div>
);위의 예시처럼 여러개의 태그들이 하나의 부모태그(div)안에 감싸져야 한다.
-Javascript 변수값은 중괄호 {}안에 넣어야 한다.
const MainCard=({img})=>{
return (
<div className="main-card">
<img
src={img}
alt="고양이"
width="400"
/>
</div>
);
}참고로 아래코드와 위코드는 서로 같다.
const MainCard=(props)=>{
return (
<div className="main-card">
<img
src={props.img}
alt="고양이"
width="400"
/>
</div>
);
}-한번에 하나의 컴포넌트만 랜더링 할 수있다.
ReactDOM.render(App, drawHere);