- React (리액트) 란?
React는 자바스크립트의 라이브러리 중 하나로서 페이스북의 소프트웨어 엔지니어
Jordan Walke가 개발하였다.
사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다.
이벤트 요청 시 서버에서 코드를 받아 다시 렌더링해야 하는 문제를 해결하기 위해 만들어졌으며,컴포넌트 (Component)라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.
UI 컴포넌트를 만드는 일만 하게 되며 캡슐화를 시켜주기 때문에 재사용성이 매우 높다.
따라서 React를 사용하기 위해 기존 코드를 모두 바꿀 필요 없이 필요한 부분부터 조금씩 사용이 가능하다.
2011년 페이스북의 뉴스피드에 처음 적용되었고 2012년 인스타그램닷컴에 적용되었다.
- Component (컴포넌트)
개념적으로 컴포넌트는 JavaScript의 함수와 유사하다.
"Props" 라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
컴포넌트는 함수 컴포넌트, 클래스 컴포넌트 중 한가지 방식으로 생성할 수 있다.
클래스 컴포넌트를 만드는 코드
class App extends Component { render () { return ( <div className="App"> Hello, React!!! //예시 </div> ); } }
- JSX (syntax extension for JavaScript)
JSX는 페이스북에서 스펙을 정의한 XML과 비슷한 자바스크립트 확장 문법이다.
JSX는 JavaScript와 XML을 합쳐서 탄생한 자바스크립트 문법의 확장판고, React에서의 요소 (Element)를 제공한다.
개발자가 자바스크립트 내부에 마크업 코드를 작성할 수 있게 해주며, 단순히 XML 만 아니라 변수나 프로터피의 바인딩 기능도 제공한다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할때 시각적으로 더 도움이 된다고 생각하며 또한 React가 더욱 도움이 되는 에러 및 경고메시지를 표시할 수 있게 해준다.
const name = "Josh Perez"; const element = <h1> Hello, {name} <h1>;
name이라는 변수를 선언한 후 중괄호로 감싸 JSX 안에 사용한 예시
- Props & State
Props와 State는 기본적으로 컴포넌트에 대해 영향을 미치는 객체인 것은 동일하나, 그 쓰임새가 전혀 다른 쓰임새를 지닌다.
React는 데이터가 부모 컴포넌트에서 자식 컴포넌트로 데이터 흐름이 이루어지는 단방향 데이터 흐름이 특징이며, 부모 객체는 자식 객체에 Props 값을 전달하며, Props 값을 받은 자식 객체는 이에 관한 부분들을 렌더링하며, State라는 자체 값을 포함하여 데이터를 변경해주고, 다시 렌더링해줄 수 있다.
1) Props
Props는 프로퍼티 (Properties) 의 줄임말이다. Props는 React에서 사용자가 컴포넌트에 전달해서 보관하길 원하는 데이터이다. 즉, 컴포넌트 내에서 데이터가 보관되면, 이 데이터는 수정되지 않고 보존되어야 하는 법칙이 성립된다.
만약 Props의 값을 변경하고자 할때에는 컴포넌트 내부가 아닌, 부모 컴포넌트에서 이에 대한 부분이 변경되어야 한다.
2) State
State는 컴포넌트 내부에 존재하고 있기 때문에, 상태값 변경이 가능하다.
