리액트 공부 - 1일차

소문자로 시작한다 - html 태그

대문자로 시작한다 - Component

 

JS 파일에서 JSX (JS + XML)를 쓰기위해선 babel 을 써야한다 

<script type="text/babel">

 

JSX 에서 단일 태그는 항상 닫아 주어야 한다. 

<input />

 

state - 변할 수 있는 값이나 변하게 될 여지가 있는 값 ( 컴포넌트 )

state 변경 시킬 때는 항상 setState() 메소드 이용

 

ex) input 태그의 value 값이 state인 경우에 onChange 이벤트를 이용,

    리턴 값으로 setState() 메소드를 이용해 변경해 주어야 한다.

<input 
type="number" 
value = {this.state.value}
onChange = {(e) => this.setState({ value: e.target.value})}
/>

 

내가 만든 클래스 메소드는 화살표 함수를 쓰자.

 

일반 함수를 사용하려면 this.function = this.function.bind(this); 

클래스 내부 상단에 bind를 해주면 된다. 

자바스크립트에서 this.는 호출한 객체의 위치를 가리키는데 그것과 상관없이 무관하게 

this.function을 무조건 function 함수를 가리키게 하려면 bind를 해주면 된다.

 

화살표 함수는 자동적으로 클래스 내에 함수를 bind를 시켜주기 때문에 

bind를 해주지 않아도 된다.

 

setState 메소드를 사용할 때, this.state를 사용한다면

// 기존
this.setState(()=>{
	result: this.state.value=""
    };
 );
// 변경 
this.setState((prevState)=>{
	return {
    	result : prevState.value = ""
	};
});

이런 식으로 사용하자. 이유는 setState가 비동기여서 this.state를 사용할 때, 

내가 원하는 결과 값을 얻을수 없을 수도 있기 때문!

 

DOM 에 접근하고 싶을 때 ref를 사용하자

 

// input 에 focus 주고 싶을 때
// 기존
document.querySelect("input").focus()

// 변경
<input ref={(c)=>{this.valName = c }}

// 컴포넌트 안에 변수 선언  
valName;

// 포커스 주기
this.valName.focus();

 

this.setState 는 렌더링을 실행한다. 성능 최적화시 중요 !

 

render() 안에 들어가 있는 메소드는 따로 만들자 !

복잡한 메소드가 render() 안에 들어가 있다면, 

렌더링 될때 마다, 그 함수를 생성하기 때문!

 

 

React Hooks

class Component에서 functional Component에 state와 ref기능 추가한 것 

 

// class Component
class TimeTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstNum: Math.ceil(Math.random() * 9),
      secondNum: Math.ceil(Math.random() * 9),
      value: "",
      result: "",
    };
  }
// Hooks Component
const TimeTable = () => {
	
    const [firstNum,setFirstNum] = React.useState(Math.random() * 9);
    const [secondNum,setsecondNum] = React.useState(Math.random() * 9);
    const [value,setValue] = React.useState('');
    const [result,setResult] = React.useState('');
}