Code States TIL - React

React의 공식 홈페이지의 설명을 보면 React는 "사용자 인터페이스를 만들기 위한 Javascript 라이브러리"라고 합니다. 웹페이지나 인터페이스의 각 부분을 컴포넌트로 나누어 복잡한 전체를 나눠서 간단하게 생각할 수 있습니다. 또 각 컴포넌트가 표현하는 데이터가 변경됐을 때 변경이 있는 컴포넌트만 다시 렌더링할 수 있습니다.

React를 시작하는 방법은 터미널에서

npx create-react-app {만들 폴더 이름}
cd {만들 폴더 이름}
npm start

같은 식으로 입력하면 새로운 react프로젝트를 만들 수 있고, npm start로 현재 만들어진 앱의 모습을 볼 수 있습니다.

React는 JSX로 더 직관적으로 사용할 수 있습니다. 기존에 Javascript에서 DOM을 만들 때

const divEl=document.createElement('div');
divEl.textContent="aaa";
divEl.classList.add("classA");
const root=document.getElementById('root');
root.appendChild(divEl);

같은 식으로 만들었다면 JSX를 사용할 때는

ReactDOM.render(
  <div className="classA">aaa</div>,
  document.getElementById('root')
);

와 같이 HTML과 유사한 형태로 작성할 수 있습니다. (Javascript에서 class는 이미 사용하고 있는 단어이기 때문에 className으로 써야합니다.)

또한 이런 tag를 직접 만들 수도 있습니다.
함수식으로는

function Aaa(props){
  const list=props.list;
  const ulList=list.map((x,index)=><li key={index}>x</li>);
  return (
    <>
      <div className="classA" onClick={props.func}>props.children</div>
      <ul>
        {ulList}
      </ul>
    </>
  );
}
ReactDOM.render(
  <Aaa list={myList} func={()=>{console.log("aaa")}>aaa</Aaa>,
  document.getElementById('root')
);

와 같은 식으로도 사용할 수 있습니다. 이때
1. JSX안에서 javascript의 요소를 가져오거나 할때는 중괄호로 감싸주어야 합니다.
2. return되는 dom 객체는 하나의 tag로 감싸져 있어야합니다. 여러 tag들이 있다면 <> </> 같은 빈 tag로 감쌀 수 있습니다.
3. 배열로 여러 tag를 만드는 경우에는 key라는 속성을 주어야합니다.
4. 태그안에 list={myList}를 넣으면 list라는 property가 생기고 이런 property들을 객체로 묶어 Aaa 함수의 인자로 줍니다. 함수 안에서는 props.list같은 식으로 가져와 쓸 수 있습니다. <Aaa ...> 태그 사이의 aaa는 props.children으로 접근할 수 있습니다.
5. onclick 같은 이벤트는 tag에서 onClick 같은 식으로 property를 줄 수 있습니다. 또한 함수를 property로 건네줘서 부모 단계에서 정의된 함수를 자식들에게 줄 수 있습니다.

이런 함수 말고도 클래스 방식으로도 구현이 가능합니다.

class Aaa extends React.Component{
  constructor(props){
    super(props);
    this.state={
      clickCount:0
    }
    this.handleClick=this.handleClick.bind(this);
  }
  handleClick(){
    this.setState({
      clicCount:this.state.clickCount+1
    });
  }
  componentDidMount(){
    console.log("mounted");
  }
  render(){
    return (
      <div onClick={this.handleClick}>{this.state.clickCount}</div>
    );
  }
}

사용법은 함수와 비슷합니다. 다만 내부에 state라는 객체가 있어 필요한 정보를 기억할 수 있습니다. setState로 state가 재설정되면 이에 따라 다시 렌더링이 됩니다. 주의할 점은 onClick등으로 함수에서 정의된 메소드가 실행될 때 this가 window 같은 것이 될 수 있어 constructor에서 this로 bind해주어야 합니다.
또 componentDidMount, componentWillUnmount, componentDidUpdate로 컴포넌트가 DOM에 삽입된 경우, 삭제되는 경우, 속성이나 상태가 변화해 다시 렌더링된 경우에 작동하는 함수를 설정할 수도 있습니다.