1. 리액트의 필요성
리액트가 없다면? 리액트가 없다면 예를 들어 코드의 길이가 천 줄 만 줄 된다 가정했을 때
한눈에 코드가 들어오지 않고 인지능력을 벗어나기 때문에 고통받는 상황이 되는데 이러한 코드 뭉텅이를
안 보이게 다른 곳에서 작성을 해두고 같은 이름의 의미를 갖는 컴포넌트를 작성하게 된다면 코드상에선 쉽게 보이고
실제로 웹페이지에서 표시될 때는 코드가 보이는 기술이 리액트의 필요성이다.
리액트는 마치 정리 정돈의 기술과 같다 예를 들어 물건이 널브러져 있으면 캐비닛 같은 곳에 탁탁 정리시키고
이름만 붙여 이름만 신경 쓰는 것과 같이 컴포넌트의 이름만 집중함으로써 복잡함을 획기적으로 최소화시킴 그렇단 건 지금보다 조금 더 복잡도에 도전할 수 있는 여지가 생긴다
작성한 컴포넌트를 (패키지/소프트웨어)로 만들어서 인터넷에 올리면 사람들이 그 컴포넌트를 사용할 수 있음
2. 주의할 점
컴포넌트를 만들 때 주의해야할 점은
그 컴포넌트를 만들 때 그 컴포넌트는 반드시 하나의 최상위 태그로 시작해야하고 하나의 최상위 태그만 있어야한다.
3. JSX
페이스북에서 만들었고
왜 만들었냐 ? 컴포넌트를 만들 때 자바스크립트에 태그사용할 때 불편하게 문자처리를 해야하는
불편함을 해소하기 위해 JSX 을 개발함
JSX로 코드를 작성하면 create-react-app 이 자동으로 javascript 코드로 컨버팅해준다.
4. 특징
html 태그에서는 속성은 attribute 라고하지만 리액트에서는 props(속성) 이라고한다
우리는 만들어진 컴포넌트를 재사용하게 되는 경우가 있고 재사용하게되면 똑같은 결과물만 출력이 되는 문제점을 알 수 있는데
이러한 문제점을 해결하려면 컴포넌트에 속성값을 줘서 차별화를 두는것이다
마치 여러개의 <a> 태그가 있지만 가리키는 주소가 href 라는 속성을 줘서 다른것처럼!
5. props 사용방법
정의
...(App Component 내부)
constructor(props) {
super(props);
this.state {
subject: {title: "HTML"},
}
}
<TOC title={this.state.subject.title}></TOC>사용
...TOC Component 파일 내부
<h1>{this.props.title}</h1> // 결과: HTMLprops를 해서 어떤게 효율적으로 바뀌었는지 ?
우리가 만든 컴포넌트는 언제나 똑같은 값을 출력하는 얘였는데 컴포넌트에 (props) 속성을 주고(컴포넌트의 입력값) 그것을 컴포넌트에서 받으면
그에 따라 달라지는 출력값을 얻을 수 있게 된다.Component를 파일단위로 분리하면 좋은점 ?
Component를 파일로 분리하면 코드가 간결해지고 필요한 컴포넌트를 빨리 찾을 수 있고 지금의 파일이 아니더라도
다른 리액트 파일에서도 컴포넌트들을 재 사용할 수 있기 때문에 빠르게 만들어 갈 수 있다.6. props & state
props 는 컴포넌트를 사용하는 입장에서 중요한 것이고
Component의 기본적인 동작을 여러동작으로 바꾸고 싶을때 사용자에게 제공하는것은 ? [props] 이고 이를 이용하여 그 컴포넌트를 을 조작할수 있게됨
props는 사용자에게 중요한 정보 이면서 구현자에게도 중요한 정보임
state는 porps 값에 따라서 내부의 구현에 필요한 데이터들이 state
사용자에는 알 필요도 없고 알아서도 안 되는 것이 컴포넌트 내부적으로 사용되는 것들은? [state]라고 한다
리액트와 같은 시스템이 컴포넌트를 만들고 그 컴포넌트가 좋은 부품이 되기 위해선 컴포넌트를 사용하는 외부의 props라는 것과 props의 따라서
그 컴포넌트를 실제로 구현하는 내부의 state라고 하는 정보가 철저하게 분리되어야 한다.
어떤 제품을 사용하는데 전선이 막 튀어나와있으면 좋은 제품이라고 생각 안 하게 되는 것처럼
즉 사용하는 쪽 과 구현하는 쪽이 철저하게 격리시켜서 양쪽에 편의성을 각자 도모하는 것
이것이 좋은 부품을 만드는 것에 핵심이고 리액트도 마찬가지이다.
7. constructor
컴포넌트가 실행될 때 render 함 수보다 먼저 실행이 되면서 컴포넌트를 초기화 시켜주고 싶은 코드는
constructor 안에다가 코드를 작성한다.
외부에서 알 필요가 없는 정보를 철저하게 은닉하는 게 철저하게 숨기는 게 좋은 사용성을 만드는 핵심이다.
내부적으로 사용할 상태는 state라는 형태를 통해서 사용한다.
TIP..
es6 최신스펙에선 class 안에 소속되는 함수는 function 키워드를 생략한다.
class App {
function render();
}
class App {
render();
}state 변경할 땐
setState({
property: value,
})nav태그는 보통 TOC(Table of Content) 목차 라는 의미를 갖는 이름으로 컴포넌트를 작성함
'React' 카테고리의 다른 글
| 오늘의 React 정리 (0) | 2020.12.22 |
|---|