Ref를 사용하면 특정 DOM노드나 React 요소에 접근하는 방법을 제공해준다. Ref 생성하기 아래와 같이 React.createRef() 함수로 Ref를 생성한뒤, 원하는 DOM 노드의 프로퍼티로 Ref를 지정해주면된다. class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <div ref={this.myRef} />; } } Ref에 접근하기 ref에 엘리먼트가 전달되었을 때, ref의 current라는 어트리뷰트에 담기게된다. const node = this.myRef.current; 그 뒤에는 해당 컴포넌트에 있는 함수를 호출 할 수 있다. class AutoFocusTextInput extends React....
목표 useEffect 사용법을 이해한다. useEffect Effect는 특정 이벤트가 아닌 렌더링에 의해 발생한 사이드 이펙트를 명시할 수 있다. 채팅에서 메시지를 보내는 것은 사용자가 특정 버튼을 클릭함으로써 직접 발생하므로 이벤트다. 서버 연결은 컴포넌트가 표시되는 유저와의 상호작용과 관계 없이 발생해야 되므로 이펙트다. Effect는 외부 시스템과 동기화할 때 사용하면 좋다. 렌터링 될 때마다 실행하기 function MyComponent() { useEffect(() => { // Code here will run after *every* render }); return <div />; } Effect의 의존성 명시하기 모든 렌더링에 대해서 실행되지 않아야되는 경우가 있다....
state와 props 둘 다 react의 구성요소인 컴포넌트를 렌더링하기 위한 정보를 담고 있다. state는 컴포넌트 안에서 관리되는 반면, props는 컴포넌트에게 정보를 전달하는 용도로 사용한다. setState() setState() 함수를 이용해서 state의 값을 변경하면 컴포넌트가 리렌더링된다. setState() 함수는 비동기로 처리되기때문에, 이 함수를 호출했다고 바로 state가 변경될거라고 생각하면 안된다. state의 이전값을 기준으로 값을 변경하고 싶다면 아래와 같이 함수를 전달하는 방식으로 구현해야된다. this.setState((state) => { // 중요: 값을 업데이트할 때 `this.state` 대신 `state` 값을 읽어옵니다. return {count: state....