React란 ?
React는 SPA (Single Page Application) 즉, 단일 페이지 응용 프로그램에서 사용자 인터페이스를 구성는데 사용되는 오픈 소스 프론트엔드 JS 라이브러리 입니다.
React UI 컴포넌트 라이브러리다.
리액트 살펴보기
-
React는 선언적이며, 뷰 또는 UI레이어의 역할만 한다.
-
React는 ReatDOM.render() 메서드를 통해 컴포넌트를 실제로 사용한다.
-
React는 컴포넌트를 클래스로 생성하고 필수적인 render 메서드를 포함한다.
-
React 컴포넌트 클래스 만드는 방법
class NAME exteds React.Component -
React는 컴포넌트는 재사용할 수 있고, 불가변 속성을 전달받아서 this.prps.Name으로 접근할 수 있다.
-
React의 속성은 해당 컴포넌트의 문맥에서 변경할 수 없다.
리액트 장/단점
장점
- 배우기에 간단하다.
- 뛰어난 Garbage Collection
- 메모리 관리
- 성능
- 서버 & 클라이언트 렌더링 지원 -> 초기 구동 딜레이 & SEO (검색엔진최적화)
- 매우 간편한 UI 수정 및 재사용
- 다른 프레임워크나 라이브러리 혼용가능
단점
- IE8 이하 지원 X
- 유지보수가 힘듭니다.
- React는 단반향 데이터 바인딩만 제공한다.
JSX
JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장으로, React.createElement() 호출을 반복해야 하는 불편을 해소한다.
JSX 특징
- React 메서드를 위한 문법적 개선이다.
- class와 for 대신 className과 htmlFor를 사용한다.
- style 속성을 입력할 때는 자바스크립트 객체로 전달. / string 형식을 사용하지 않고 key가 calmelCase- 인 객체가 사용된다.
- 변수 출력
{name} - 속성에 값을 입력하지 않은 경우 기본 값은
true이다. - 컴포넌트에서 여러 element를 렌더링할 때 contianer Element안에 포함시킨다.
if/else가 필요할 경우에는 삼항연산자, 즉시 실행함수로 처리하는 게 좋다. -- 조건부 렌더링
주석 ---{/*....*/}
JSX 장점
- 개발자 경험 개선 - 표현력이 뛰어나 코드 읽기 쉽다. XML과 문법이 유사하여 중첩된 선언형 구조를 잘타나냄
- 팀의 생상선 향상
- 문법 오류와 코드량 감소
자바스크립트
ReactDOM.render(
React.createElement('h1', null, 'Hello world!'),
document.getElementById('content')
) JSX
ReactDOM.render(
<h1>Hello World!</h1>
document.getElementById('content')
)Props
react component에 전달되는 값을 포함하는 단일 값 또는 객체입니다. 부모 component 에서 자식 component 로 전달되는 데이터 입니다.
- 컴포넌트 내부의 Immutable Data
- JSX 내부에
{this.props.propsName} - 컴포넌트를 사용할 때<> 안에
propsName="value"; - this.props.children은 기본적으로 갖고있는 props로서,
<Cpnt>여기에 있는 값이 들어간다.</Cpnt>
props의 목적
- 사용자 정의 데이터를 React component 로 전달할 수 있습니다.
- State 변경을 Trigger 할 수 있습니다.
- Component 의 render 메서드 안에서 this.props.reactProp 로 접근하여 사용할 수 있습니다.
기본값 설정
Component.defaultProps = {..}
Type 검증
component.propTypes = {...}
state
component의 life cycle 동안 변경될 수 있는 정보를 담고 있는 객체입니다.
- 유동적인데이터
- JSX 내부에
{this.state.stateName} - 초기값 설정이 필수, 생성자(contructor)에서 this.state = {}으로 설정
- 값을 수정 할 때에는 this.setState({...}), 렌더링 된 다음엔 this.state= 절대 사용하지 말것..
state와 props의 차이점
props와 state는 모두 JavaScript 객체입니다 두 가지 다 렌더링 결과에 영향을 주는 정보를 가지고 있지만, component 와 관련된 기능면에서 차이가 있습니다.
props는 함수 매개변수와 같이 component 요소로 전달됩니다. state 는 component 안에서 관리되고 사용할 변수 선언과 비슷합니다.
언제 클래스 컴포넌트를 사용하고 언제 Functional 컴포넌트를 사용할까요?
Component 에서 state 또는 life cycle methods 를 필요로 한다면 Class component를 사용하고 그렇지 않다면 Functional component를 사용할 수 있습니다.
