Hooks란? => 함수컴포넌트에서 ref와 state를 사용 가능하게 하는 기능 const [x, y] = React.useState(z); => hoos에서 state 선언 x - state y - x state의 setState역할 z - 초기값 setState(a) => state값을 a로 변경 (setState는 위 state선언에서 y부분) const inputRef = React.useRef(null) inputReft.current.focus(); => input태그에 focus 설정 class, hooks 차이점 - state, setState, Ref 사용이 다름 - hooks는 함수컴포넌트 전체가 다시 렌더링되서 조금 더 느릴 수 있음 (렌더링은 state가 변경될 때 발생) 구구단 ..

=> class를 render의 return을할 때 로 묶어주는 경우가 생기는데 이 는 의미없는 태그로 를 사용하면 불필요한 태그를 사용하지 않아도 됨 e.preventDefault() => 태그, 태그와 같은 동작을 중단 시킴 prevState => 이전 상태 값을 가지고 있음 input; {this.input = c; }}/> this.input.focus(); => input으로 focus전환 class의 render부분에 함수를 바깥으로 두지 않으면 렌더링이 발생할 때 해당 부분들도 재실행되므로 최적화를 위해서 바깥에 두는것이 좋음 해당 게시글은 www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=1&a..

this.state = { a : x, b : y, ...} => state값들 선언 및 값 설정 this.setState({ a : z }) => state값 변경, a state값을 z로 변경, state가 변경될때마다 렌더링 발생 babel => jsx문법 지원, 브라우저 호환 지원 1. html로 Like버튼 구현 2. jsx class로 like버튼 구현 해당 게시글은 www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=1&ab_channel=ZeroChoTV 의 강의내용을 기반으로 공부한 내용을 정리한 글입니다.

=> react가 동작하는 핵심적인 코드가 존재 => react코드를 웹에다가 붙여주는 역할 React.createElement => HTML 태그를 만들어주는 함수 class의 constructor부분 => Component가 처음 실행될 때 가장 먼저 실행되는 부분 class의 render부분 => 해당 클래스가 화면에 어떻게 표시할지 결정하는 method ReactDOM.render(x, y); => 웹에다가 실제로 렌더링 해주는 역할, x태그를 y태그 안에 붙임 해당 게시글은 www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=1&ab_channel=ZeroChoTV 의 강의내용을 기반으로 공부한 내용을..

리액트란? 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 * 사용자 인터페이스 : 사람과 기계 사이에 상호작용이 일어나는 공간 페이스북의 Jordan walke에 의해 개발되었으며 페이스북, 에어비앤비, 드랍박스, 트위터 우버, 등 많은 사용자들이 사용 특징 1. 사용자 경험 - 웹에서 앱과 같은 사용자 경험을 제공 2. 재사용 컴포넌트 - 중복되는 요소를 하나로 묶어줄 수 있어서 유지보수에 편리 3. 데이터-화면 일치 - 데이터를 화면에 반영할 때 효율적 리액트 컴포넌트 - class형 컴포넌트와 함수형 컴포넌트로 표현이 가능 - Hooks 함수형 컴포넌트에서 클래스형 컴포넌트의 기능을 사용할 수 있게 해주는 기능 리액트 공식 홈페이지 : ko.reactjs.org/ React – 사용..