이 글은 코딩온의 김규리선생님의 수업을 바탕으로 작성하였습니다.
React JS
동적사용자 인터페이스를 만들기 위해서 페이스북에서 나온것이다.
데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합하다. 화면을 만들기위한 자바스크립트 라이브러리이며, 싱글페이지 어플리케이션이나 모바일 어플리케이션 개발시 많이 사용된다. 사용자와 상호 작용이 가능한 동적 UI 제작이 가능하다.
react외에도 angular와 vue.js도 있다. 그중 react.js 에대해서 배우게 되었다. vue.js가 쉽다고하지만 레퍼런스를 찾기 쉽지 않고, 아직도 react가 더 많이 쓰이기 때문이다
참고로 react는 library이고 next는 react를 기반으로 하는 프레임워크이다.
React특징
1. Date Flow
2. Component 기반 구조
3. Virtual Dom
4. Props and State
5. JSX
1. Date Flow
단방향의 데이터흐름. 단방향이니 어느방향에서 왔는지 한눈에 보인다. 규모가 큰 애플리케이션에 리액트가 적합한 이유이다.
2. Component 기반 구조
component는 독립적인 단위의 소프트웨어 모듈로 소프트웨어 독립적인 하나의 부품으로 만드는 방법이다.
react는 UI(View)를 여러 Component를 쪼개서 만든다. 한페이지 내에서 여러부분을 Component로 만들고 이를 조립해서 화면을 구성한다.
페이지를 구성하는 하나하나의 요소들이 모여서 하나의 웹페이지를 만들어내는것이다.
<장점>
1. 전체 코드를 파악하기 쉽다.
2. 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높다.
3. 코드를 반복할 필요없이 Component 만 import 해서 사용하면 된다는 간편함이 있다.
4. 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이다.
[Component] 기반구조.
코드 자체를 캡슐화시켜서 사용할 수 있게한다.
Class App extends Component{
render() {
return (
<Layout>
<Header />
<Navigation />
<Content>
<Sidebar></Sidebar>
<Router />
</Content>
<Footer></Footer>
</Layout>
);
}
}→ app이 부모고 그 아래 모든 컴포넌트가 app의 자식이다.
Header, Footer 같은 구조를 컴포넌트로 제작한다. 이것들을 조합해서 root component-최상위 컴포넌트, 로 만들기 -Layout
3. Virtual Dom
DOM : Document Object Model (문서 객체 모델)
React는 DOM tree구조와 같은 구조를 virtual dom으로 가지고 있다. 이벤트가 발생할 때마다 virtual DOM을 만들고 다시 그릴때 실제 전후 상태를 계속 비교한다. → 앱의 효율성과 속도 개선.
dom구조를 가상으로 만든다..정도로 이해하면 쉽다.
4. Props and State
props :
부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터. 자식에서는 props 변경 불가능, props를 전달한 최상위에서만 변경가능하다.
state:
컴포넌트 내부에서 선언되고 내부에서 값을 변경한다. 클래스형 컴포넌트에서만 사용가능, 각각의 state는 독립적이다.(함수형에서는 아님.)
5. JSX
React에서 JSX 사용이 필수는 아니지만 많이 사용된다.
JSX = Javascript + XML
React 프로젝트
npx create-react-app {앱이름}앱이름에는 대문자 사용이 불가하다. 대신 - 를 사용한다.
npx는 npm의 자식명령어로 npm보다 가볍게 패키지를 구성한다. npm버전이 5.2이상일때, node 버전이 14이상일때 사용가능하다.
그리고 npm start로 실행시킨다.
JSX 사용하기
function App() {
const name = 'SeSAC';
return (
<div>
<h1>Hello{name}</h1>
</div>
);
최상위 요소는 형제가 없는 고유한 요소이다. 반드시 부모 요소 하나가 감싸는 형태를 가져야한다.
JSX안에서 JavaScript사용이 가능하다. JSX에서 JavaScript 문법을 사용할때는 {}로 감싸서 사용한다.
연산자를 사용할때는
· 계산을 다 한 후, 변수에 담아서 JSX문법에서 보여주기
· { } 안에서 삼항 연산자 사용하기
또한 JSX에서 style을 이용할때는 camelCase를 이용한다. 또한 중괄호를 두번써야 인라인으로 쓸 수 있다. 내용자체를 다 넣어줘야해서 중괄호 두개라서 생각하면 편하다.
ex) onClick, placeHolder, className...etc
return(
<div style={{
backgroundColor: "yellow",
color: "blue"
}}>
</div>
)
삼항연산자
{flag ? (<h1>True</h1>):<h2>False</h2>}: ? 의 앞부분이 if문이고 : 전의 친구들이 else에 들어간다. JSX에서 위의 구문이 if문을 출력해준다. 만약에 거짓을 처리안하고 정답만 처리하고 싶으면 아래와같이 해준다.
{flag && (<h1>True</h1>)}