11강 - State 관리

단방향 데이터 흐름

부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨주는 것

왜 단방향을 쓰는가?

양방향일 경우, 자식 데이터가 부모 데이터에 영향을 주면 부모 데이터는 리렌더링이 일어나고 
부모 데이터가 리렌더링이 됐으므로 자식 데이터 역시 렌더링이 일어난다. 그럼 또 다시 부모 데이터에 영향을 줘 리렌더링 > 자식 렌더링 > 부모 렌더링 > 자식 ... 무한 루프에 빠지기 때문에 단방향을 사용한다.

클래스형 컴포넌트에서 State 다루기

가상돔, 실제돔을 비교할 때 비교를 해서 바뀐 부분이 한 번에 올라가는데,
비교를 하기 위해서는 값이 필요한데 그 값이 'key'이다.
각 요소마다 key라는 내용이 자동으로 들어가는데 이는 Elements 탭에서는 확인이 불가능하다. 

 => 실제 돔에 들어가는 속성이 아니기 때문

---

생활코딩 리액트

컴포넌트는 반드시 하나의 최상위 태그가 필요하다.

Props는 사용자가 컴포넌트를 사용하는 입장에서 중요하고

State는 props의 값에 따라 내부의 구현에 필요한 데이터들이라고 생각하자.

어떤 컴포넌트가 실행될 때 render보다 먼저 실행되면서 그 컴포넌트를 초기화 시켜주고 싶은 코드는 constructor 안에 코드를 작성한다.

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      content:{Title:"기본 제목", sub:"기본 내용"}
    }
  }
  render() {
    return(
      <div className="App">
      <Content Title={this.state.content.Title} Sub={this.state.content.sub}/>
      </div>
    );
  }
}

리액트에서는 Props의 값이나 State의 값이 바뀌면 state를 가지고 있는 컴포넌트의 렌더 함수가 다시 호출되면서 렌더 함수 하위의 컴포넌트들도 리렌더링 된다.(화면이 다시 그려진다.)

온클릭 이벤트

다른점
JS
onclick="function"
React
onClick={function(){}}

debugger;

개발자 도구 창에서 debugger 코드를 만나면 실행을 멈춘다. > sources 에서 확인 가능

bind()

const obj = {name:'jihoon'};
function bindTest(){
    console.log(this.name);
} >> 로그의 결과는 undefined

여기서 
bindTest.bind(obj); 바인드 함수를 사용하면 this의 값이 ()안의 값이 된다. 여기선 obj가 되겠다.

---

컴포넌트 밖에서 props를 수정하는 것은 가능하다.

컴포넌트 안(render 이하)에서 props를 수정하려면 이벤트(setState)를 통해 props의 state를 바꿔주면서 props를 수정해야한다.

this.state.mode = 'welcome' X
ㄹ
컴포넌트의 생성이 완료된 후 동적으로 state 값을 바꾸고 싶다면 setState를 사용한다.

this.setState({ mode:'welcome' }); O

---

리덕스(Redux)

데이터를 저장소에 저장해뒀다가 저장소의 값이 바뀌면 관련된 모든 컴포넌트가 알아서 바뀌게 하는 것.

concat()

let a = [1, 2] 
a.concat(3)
a = [1, 2]  >> 값이 담기지 않음

let a = [1, 2]
let b = a.concat(3)
b = [1,2,3] >> 새로운 변수에 담으면 값이 담긴다.