TIL 0218

import ..from && export (default) -> ES6+ 환경 (babel 설정시 가능)
require() && module.exports -> npm(ES5) 환경 (Common.js 문법)

export const Try = ...
// 사용 가능(단, 부분 모듈로 인식) 그래서 import {Try} 로 해줘야함

export default const Try = ...
// 불가능

에러 메시지

SyntaxError: Only expressions, functions or classes are allowed as the 'default' export.

디버깅
표현식을 선언식으로 바꾸기 (const Try = () -> function Try())

상속받은 props를 자신의 state로 만들기 (props와 state 연결)

• 상속되는 props를 자식 컴포넌트에서 변경하면 버그가 발생한다.
• props 변경, 추가, 삭제는 그 props를 가지고 있는 부모(조상) 컴포넌트여야 한다.
• 자식 컴포넌트에서는 단순히 props 값을 참조해 state 값으로 할당해주면 된다.

클래스형

export default class Try extends Component {
  state = {
    result: this.props.tryInfo.result;
  }
  onClick = () => {
  	this.setState({
    	result: 1;
    });
  }
  render() {
  	return (
      <li>
        <div onClick={onClick}>{result}</div>
      </li>   
    );
  }
}

함수형

export default function Try({tryInfo}) {
  // props 값을 참조해 state로 할당하기
  const [result, setResult] = useState(tryInfo.result);
  const onClick = () => {
  	setResult('1');
  }
  return (
    <li>
      <div onClick={onClick}>{result}</div>
    </li>  
  );
}