React
출처 : 코드스테이츠, 생활코딩, velopert
What is "React"?
리액트는 UI(유저 인터페이스)를 만들기 위한 자바스크립트 라이브러리
웹사이트를 만드는 것은 결코 단순한 작업이 아니다.
상태를 관리해야할 DOM이 많아지면서 코드가 아주 복잡해져버리는 것이다.
그래서 상태관리를 최소화하고 기능 개발에만 집중할 수 있게 해주는 프레임워크가 나타나게 된다.
예를 들어 angular, Vue, React 등이 있다.
Component
이 중에서 React는 Component에 집중하고 있다.
여기서 Component는 하나의 의미를 가진 독립적인 단위 모듈이라고 정의할 수 있는데
이렇게 말하면 너무나 어렵다.
쉽게 말하자면 나만의 HTML 태그(나만의 Component)를 만들 수 있다는 것이다!
=> 이 말은 곧 복잡한 코드를 기능별로 나누어서 정리함에 담고, 정리함에 이름표를 붙여 놓아 찾기 쉽게 정리하는 것이라고 할 수 있다.
여기서 Component의 장점은 내가 직접 Component를 만들 수도 있지만
남이 만들어 놓은 Component를 사용할 수도 있다는 것이 특장점이다.
또한 컴포넌트 태그에 속성(props)을 붙여서 같은 태그라도 내용이 다르게 나오게 할 수도 있다.
이것이 바로 재사용성을 높이기 위한 방법! 리팩토링 방법이다.
Component의 기능
1. 가독성
2. 재사용성
3. 유지보수
상위 component에서 props를 하위 component에 내려주는 예제
(부모에서 자식에게 내려주는 것만 가능하다!!!)
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
하위 component
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
HTML에 렌더링
ReactDOM.render(
<App />,
document.getElementById('root')
);
<!--HTML 파일에 root라는 id를 가진 태그가 있다는 가정 하에!-->
브라우저에 출력된 결과는 다음 이미지와 같다.
React ES6 & JSX
JSX : 자바스크립트 확장 문법이다.
자바스크립트는 아닌데 자바스크립트처럼 쓰면서 Babel이라는 tool이 JSX 를 자바스크립트 코드로 변환해준다.
주의사항1) 반드시 하나의 element로 감싸야 한다.
잘못된 예시
<div>
<h1>hello</h1>
</div>
<div>
<h2>hello</h2>
</div>
<!--이렇게 쓰면 땡!-->
올바른 예시
<div>
<div>
<h1>hello</h1>
</div>
<div>
<h2>hello</h2>
</div>
</div>
<!-- 이렇게 하나의 태그로 감싸줘야 한다!!! -->
주의사항2) 변수를 적을 땐, {}안에 작성한다.
주의사항3) JSX 내부에서는 if문을 사용할 수 없다.
IIFE or 삼항연산자를 사용해야 한다.
주의사항4) 엘리먼트의 클래스 이름을 적용할 때는 className을 사용해야 한다.
React Key concept
-Data Flow
단방향 데이터 흐름
-Props
상위 컴포넌트가 하위 컴포넌트에게 내려주는 데이터
그래서 하위는 이 props를 사용만 할 수 있고 변경할 수 없다.
-state
컴포넌트가 갖는 상태
객체의 형태로 컴포넌트에 보관하고 관리한다.
class component로 작성되어야 한다.(function component는 안됨)
값을 변경할 때는 반드시 setState 메서드를 사용해야 한다. (render()함수가 다시 호출됨)
immutable하다
state변화의 결과로 life cycle이 실행된다
-Life cycle
컴포넌트가 브라우저에 보여질 때(DOM에 생성되기 전 후나 데이터가 변경되어 상태를 업데이트하기 전 후로 실행되는 메소드), 업데이트될 때, 사라질 때 각 단계 전, 후로 특정메서드가 호출된다.
여기서 setState를 사용하는 이유와 Life cycle의 연관성을 알아보자
-> setState를 해줘야만 Life cycle이 돌 수 있다!
: 라이프사이클은 렌더링과 상태의 변경에 따라서 발생시킨다.
그래서 state를 직접 변경하면 안되는 것이다.
mounting 리액트 컴포넌트가 들어오는 시점
updating 스테이트가 변경되는 시점
unmounting 리액트 컴포넌트가 사라지는 시점
-Functional Component VS Class Component
Presentational 컴포넌트 (혹은, Dumb 컴포넌트) 는 함수형 컴포넌트를 사용하고
Container 컴포넌트 (혹은 Smart, 컴포넌트) 는 클래스형 컴포넌트를 사용한다.
그래서 Class Component에서는 state와 lifecycle 기능을 사용할 수 있지만 Functional Component에서는 불가능하다.