State & Props 좀 더 파고 들자

1. state, props의 개념에 대해서 이해.

1) props

• props는 부모-자식간의 데이터를 전달할 때 사용하며
• immutable이기에 부모가 준 값을 수정할수가 없이 그대로.
• text의 경우는 {}없이도 사용가능
• 함수도 props 전달 가능.

function App {
	return (
    	<div className="App">
      		<Person name={박시우} age={145} />
      		<Person name={박지웅} age={27} />
            <Person name={박상웅} age={238} />
      	</div>
    );
}

//함수형 컴포넌트의 경우, 매개변수로 props를 전달해줘야 접근가능
function Person(props) {
//매개변수 props를 구조분해할당으로 {name, age}로 가져오면
//{name}, {age}로 사용 가능.  
    return(
        <div>
    	<h1>이름은: {props.name} 나이는: {props.age}</h1>
    </div>
    );
}

//클래스형 컴포넌트의 경우.
class Person extends React.Component {
  //java에서 처럼 생성자는 자동생성해주는 듯
  //props에 접근하기 위해 this 가 필요.
  render() {
    //es6 문법사용시
    // const {name,age} = this.props;
    // 구조분해할당으로 {}에 name, age를 사용할수 있어요.
    return (
      <h1>
        이름은: {this.props.name} 나이는: {this.props.age}
      </h1>
    );
  }
}

//클래스 컴포넌트에서 constructor 생성자 사용시
class Person extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: props.name, age: props.age };
  }
  render() {
    return (
      <h1>
        이름은: {this.state.name} 나이는: {this.state.age}
      </h1>
    );
  }
}

2) state

• Class만이 state를 가질수 있다.
• 함수에서도 사용하기 위해 state-hook이 훅~훅~ 나와버림.
• 자료를 저장할 때, state를 사용한다.
• 컴포넌트간의 데이터 처리 할때 사용
• mutable. 데이터를 수정할수도 있고 수정하면 리렌더링 되버림.
• 부모 컴퍼넌트에서 state를 사용할 경우. 자식에게 props로 전달 가능!

//구 문법으로 state를 사용하여 접근하는 경우
export default class test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      person: [
        { name: "박시우", age: 145 },
        { name: "박지웅", age: 27 },
        { name: "박상웅", age: 245 },
      ],
    };
  }
  render() {
    const { person } = this.state;
    return (
      <div className="App">
        <Person name={person[0].name} age={person[0].age} />
        <Person name={person[1].name} age={person[1].age} />
        <Person name={person[2].name} age={person[2].age} />
      </div>
    );
  }
}

//state를 사용하여 접근하는 경우
export default class test extends Component {
    state = {
        person:[
            {name:'박시우', age:145},
            {name:'박지웅', age:27},
            {name:'박상웅', age:245},
        ]
    }
    render() {
        return (
            <div className="App">
                <Person name={this.state.person[0].name} age={this.state.person[0].age} />
                <Person name={this.state.person[1].name} age={this.state.person[1].age} />
                <Person name={this.state.person[2].name} age={this.state.person[2].age} />
            </div>
        )
    }
}

// Person으로 구조분해할당하여 접근하는 경우
export default class test extends Component {
    state = {
        person:[
            {name:'박시우', age:145},
            {name:'박지웅', age:27},
            {name:'박상웅', age:245},
        ]
    }
    render() {
        const {person} = this.state;
        return (
            <div className="App">
                <Person name={person[0].name} age={person[0].age} />
                <Person name={person[1].name} age={person[1].age} />
                <Person name={person[2].name} age={person[2].age} />
            </div>
        )
    }
}

2.함수컴포넌트에서도 state를 사용해보자. 훅~훅~(state hook => useState)

• Hook은 React 16.8에 새로 추가된 기능으로 Hook은 class component를 사용하지 않고 functional component에서도 class component에서만 사용할 수 있었던 기능을 사용할 수 있게됨.

import React, {useState} from 'react';

function test() {
  const [Count, setCount] = useState(0);
  //class형 컴포넌트에선
  // constructor(props) {
  // super(props);
  // this.state = {count:0};
  // }
  // es6문법 state = { count: 0};
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
//class에선 this 키워드로 접근
//<button onClick={() => this.setState({count: this.state.count+1})>Click Me</button>
    </div>
  );
}

• useState는 현재의 state의 값과 이값을 업데이트하는 함수를 쌍으로 제공하며, 이벤트 핸들러나 다른곳에서 호출할 수 있음
• this.setState와 거의 유사하지만, 이전 state와 새로운 state를 합치지 않는다는 점.
• useState(초기값) 으로 초기값을 설정하며, 이 초기값은 렌더링에만 딱 한번 사용된다.
• 여러 state 변수 선언하기

function ExampleWithManyStates() {
  // 상태 변수를 여러 개 선언했습니다!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
}

3.이벤트 핸들러 함수를 만들고 React에서 이용해 보기.

• onChange: Form Element(input, textarea, select)에서
• onClick: button, a 태그를 사용한 링크이동시

  
  function Count() {
  const [count, setCount] = useState(0);

  const handleAdd = () => {
    setCount(count+1);
  };

  const handleMinus = () => {
    setCount(count-1);
  };
  return (
    <div className="App">
      <h1>Event handler practice</h1>
      <button onClick={handleAdd}>+</button>
      &nbsp;{count}&nbsp;
      <button onClick={handleMinus}>-</button>
    </div>
  );
}

4. React의 One-way data flow

• 부모=>자식으로만 데이터 전달 가능
  • 유지보수를 좀 더 편리하게 만들 수 있도록 해줌.
  • 단방향으로만 전달하기 때문
• 단방향은 view를 통째로 바꾸어주는 역할을 하기 때문에 단방향 데이터 방식은 DOM을 갱신할 때 큰 장점으로.. Virtual DOM과 궁합이 잘 맞는다.
• 종합해보면 단방향 데이터흐름은 이해하기 쉽고 관리하기 좋다.

TIP

• 비쥬얼 스튜디오 코드의 검색해서 문자열 바꿔주는 단축키는
  option+cmd+f 이다. 하드코딩은 아니아니 되오~

PS

• 블로깅하기 전까지는 클론코딩하면서 props와 state의 개념을
  사전적으로 이해했었는데, 하면서 아 이걸 이래서 썼구나! 하며 알아가면서 코딩하니 리액트도 좀 재밌어지기 시작한다.