props와 state의 차이
props (properties)
- 상위 컴포넌트(부모)로 부터 상속받는 데이터
- 변경 불가 (불변 데이터)
- props를 사용하는 함수는 순수함수처럼 작동해야함
(외부영향 받지 않음, 항상같은값 리턴) - 읽기 전용
state
- 현재 컴포넌트에서 컨트롤 할 수 있는 데이터 (생성,변경)
- 변경 가능 (가변 데이터)
- 구성 요소에 의해 유지
- 쓰기 전용
공통점
- 일반 JavaScript 객체
- 데이터를 다룰때 사용되는 개념
- 렌더링 결과물에 영향을 주는 정보를 갖고있다
차이점
- props는 컴포넌트에 전달되는반면 (함수 매개변수처럼),
- state는 컴포넌트 안에서 관리된다.(함수 내에 선언된 변수처럼)
사용방법
//class컴포넌트 사용
//App컴포넌트에서 TEST 컴포넌트로 데이터를 전달하려고한다
//APP컴포넌트
state = { name : "재원" } //state라는 프로퍼티 생성
updateName() {
this.setState({ name: "성철" })
} //state 업데이트
render() {
return (
<div className="App">
<TEST nameData={this.state.name} //this를 통해 생성한 state사용
fnData={this.updateName.bind(this)}/>
</div>
)}
//TEST컴포넌트
render() {
return <h1>Hello, {this.props.name}</h1>;
}
//함수컴포넌트 사용
//Hook 사용함
//useState는 State 변수의 초기값을 매개변수로 전달하여 호출 > 결과값으로는 배열을 반환
//반환된 배열에서는 useState 함수를 호출할 때 설정한 초기값이
//할당된 변수와 해당 변수를 수정하기 위한 Set 함수가 포함되어 있음
//APP컴포넌트
const [name, setName] = useState(""); //const [변수명, Set함수명] = useState (데이터 초기값);
const updateName = () => setName("성철")
return (
<div className="App">
<TEST nameData={name} fnData={updateName}/>
</div>
//TEST컴포넌트
const TEST = (props) => {
return <div>{props.name}</div>
}Props가 컴포넌트간에 전달받는 것이라고 했는데 자식에서 부모로도 전달할 수 있는가
가능하다.
callback함수를 이용 (setter내려주기)
- 상위(부모)컴포넌트에서 정의한 callback함수를 하위(자식)컴포넌트에 props로 내려준다.
- 자식컴포넌트는 props로 받은 함수를 호출해 callback으로 넘겨야할 데이터전달.
- callback함수의 실행으로 상위컴포넌트에서 자식으로 부터 데이터를 받음
사용방법
//callback 함수사용
//APP 상위컴포넌트
const updateName = (name) => {
console.log(name) //재원
}
return (
<div className="App">
<TEST fnData={updateName}/>
</div>
//TEST 자식컴포넌트
const TEST = (props) => {
const [name, setName] = useState("재원");
return <div>{()=>props.fnData(name)}</div>
}데이터 전달 방식중 단방향, 양방향 장단점. 그럼 리액트는 어떤 방식을 사용하고 있나요?
리액트는 “하향식(top-down)” 또는 “단방향식” 흐름이다.
- 부모 컴포넌트나 자식 컴포넌트 모두 특정 컴포넌트가 유상태인지 또는 무상태인지 알 수 없고, 그들이 함수나 클래스로 정의되었는지에 대해서 관심을 가질 필요가 없다.
- 단방향 데이터 흐름이기에 props를 통해 하위 컴포넌트로 데이터 전달
- 역방향 데이터 흐름을 위해 callback함수를 통해 상위 컴포넌트로 데이터 전달
데이터 바인딩?
- 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것
(ex. HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정을 했을 때, 해당 값이 변경이 될 경우 다시 HTML 상에 데이터(값)를 변경된 값에 따라서 맞추어 주는 동작을 '데이터 바인딩'이라고 한다)
단방향
- 링크는 하나만이 존재하고 두 장치 중 한쪽은 전송, 한쪽은 수신만 할 수 있음. 때문에 일방통행 처럼 한쪽 방향으로만 통신이 가능하다.
(ex. TV, 라디오, 사내방송, 자판(입력), 모니터(출력))
SPA Framework에서는 React
- Javascript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화하는 것을 의미한다.
- 역으로 HTML(View)에서 JS(Model)로의 직접적인 데이터 갱신은 불가능하다.
(콜백함수를 props로 내린 후 함수호출로 데이터를 변경할 수 있음) - 대표적으로 SPA Framework에서는 React에서 단방향 데이터 바인딩함
장점
- 코드를 이해하기 쉽고 데이터 추적, 디버깅이 쉽다.
- 데이터 변화에 따른 성능저하 없이 DOM 객체 갱신가능
단점
- 변화를 감지하고 화면을 업데이트 하는 코드를 매번 작성해야 함
양방향
양방향의 경우 2개로 다시 나눌 수 있다.
반이중 (Half-duplex)
반이중의 경우 양쪽 방향에서 통신이 가능하지만 동시에는 통신이 불가능하다.
(ex. 무전기)
전이중 (Full-duplex)
전이중은 반이중과 다르게 양쪽 방향에서 동시에 같이 주고 받을 수 있다.
(ex. 전화기)
SPA Framework에서는 Vue.js, Angular
- Javascript(Model)와 HTML(View) 사이에 ViewModel이 존재하여 하나로 묶여서(Binding) 되어서 둘 중 하나만 변경되어도 함께 변경되는 것을 의미한다.
장점
- 코드의 사용면에서 코드량이 크게 준다.
단점
- 변화에 따라 DOM객체를 렌더링해주거나 데이터를 바꿔주기 때문에, 성능이 감소됨
