[생활코딩] React -Component 파일로 분리하기 / State / key

<Component 파일로 분리하기>

 

한 개의 파일안에 컴퍼넌트가 1000개라면 얼마나 복잡할까?

 

그리고 다른 파일에서 해당 컴퍼넌트를 가져다 쓰는것도 어렵다.

그래서 컴포넌트를 각각의 파일로 정리해보겠다.

 

---

TOC.js안에 여러가지 변수나 함수들이 존재할수가 있다.

그러면 그 많은것들 중에서 어떤것을 외부에서 사용할 수 있게 허용할것인지

코드를 통해서 작성할 수 있다. 그게 export default TOC;

 

---

<State>

 

state 개념은 props와 같이 살펴봐야된다.

 

제품을 만드는 사람들은 제품의 내부적인 구현을 위해서 다양한 상태를 사용하고,

다양한 내부적 조작장치, 매커니즘을 가지고 있다.

비유적으로 이야기하자면 그게 state이다.

props는 사용자가 컴퍼넌트를 사용하는 입장에서 중요하고,

state는 그 props의 값에 따라서 내부의 구현에 필요한 데이터가 state이다.

 

---

우리가 저 컴퍼넌트의 기본적인 동작을 바꾸고 싶을 때

사용자에게 제공하는것이 바로 태그에서는 속성에 해당하는 props이다.

props를 문법적으로 제공하는것을 통해서 사용자는 컴퍼넌트를 조작할 수 있게 된다.

그래서 props는 특히 사용자에게 중요한 정보이다.

 

사용자는 알 필요가 없는 컴퍼넌트 내부적으로 사용되는건 state이다.

외부적인 props와 내부적인 state인 둘은 철저하게 분리되어 있어야 된다.

 

다양한 일을 할 수 있는 컴퍼넌트를 만들 때 필수적인 요소인 state을 살펴볼거다.

---

이렇게 하드코딩 되어있는 부분들이 보기 싫으므로 저 부분들을 state로 만들고,

그 state 값을 Subject, Content의 props를 전달하는것을 통해서 코드를 개선해볼거다.

---

state값을 초기화 시킬것이고, 그 초기값을 저 값들로 셋팅하려고 한다.

우리가 어떤 컴퍼넌트가 실행될 때 render보다 먼저 실행되면서,

그 컴퍼넌트를 초기화 시켜주고 싶은 코드는 constructor함수를 만들고, 그 안에다가 코드를 작성하면 된다.

 

컴퍼넌트가 실행될 때 constructor함수가 제일 먼저 실행돼서 초기화를 담당한다. (여기서 state값 초기화)

---

리액트에서 "" 는 문자열을 의미한다. 자바스크립트의 코드로써 실행되길 원한다면 중괄호를 써준다.

---

App.js를 사용하고 있는 파일은 index.js다.

index.js에 보면 App이라는 컴퍼넌트를 실행하는 코드가 있다.

저 부분만 보면 subject가 있는지 없는지 알 수가 없다. (은닉)

외부에서 알 필요가 없는 정보를 철저하게 숨기는게 좋은 사용성의 핵심이다. (전선 삐져나오는 경우를 생각해보자)

 

App이 내부적으로 사용할 상태는 state라는 형태로 사용한다.

그렇게 만들어진 state값을 subject라는 저 컴퍼넌트의 props의 값으로 줬다.

---

상위 컴퍼넌트의 App의 상태를 하위 컴포넌트에 전달하고 싶을 때는,

상위 컴퍼넌트 state의 값을 하위 컴퍼넌트의 props의 값으로 전달하는것이 얼마든지 가능하다는 것을 알 수 있다.

---

<key>

 

state가 여러개의 값을 다룰 때는 사용법이 조금 달라진다.

글 목록인 TOC 안에 있는 데이터를 App의 내부state를 TOC에 주입해주는것을

통해서 자동으로 데이터가 바뀌게 해볼거다.

TOC의 부모가 가지고 있는 state를 이용해서 TOC의 내부 데이터가 바뀌게 해볼거다.

데이터가 여러개이므로 배열을 사용.

---

 

contents라고 하는것의 배열을 TOC에 주입하고 싶다면?

 

TOC는 내부적으로 어떤 값을 가지고 있냐면

this.props.data라고 하는 값을 가지고 있다.

저 값을 이용해서 글 목록을 생성해보겠다.

---

TOC.js의 파일을 열고 데이터가 바껴도 로직을 바꿀 필요가 없어졌다. contents 배열 안에 있는 값만 수정해주면됨.

여러개의 엘리먼트를 자동으로 생성하면 에러가 발생한다.

key={} 안에 식별자를 넣으면 된다.

리액트가 내부적으로 필요해서 요청하는거라 그러려니 하면 된다.

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.