웹/리액트, 리액트 네이티브 (6) 썸네일형 리스트형 react 리액트를 사용하는 이유, 리액트에서 함수형 컴포넌트를 사용하는 이유 강력한 커뮤니티 확장성 - next.js, getsby.js 등 react-native 경쟁상대의 부재 커리어 채용문제 ---- 함수형 컴포넌트의 사용이 주류가 된 이유 원래 함수형 컴포넌트에서는 클래스 컴포넌트 생명주기(componentDidMount 등)를 사용할 수 없어서 컴포넌트가 변화된 후 리렌더링을 할 수가 없었다. 그러나 리액트 훅의 등장으로 함수형 컴포넌트에서도 이것이 가능해졌다. + 지금은 함수형 컴포넌트가 성능 면에서도 더 뛰어나다(실행되는 속도가 조금 더 빠름). hooks란? 쉽게 말하면 A라는 액션이 실행될 때 A라는 액션과 동시에 실행되는 함수를 정의하는 것이다. 또한 hooks는 기본적으로 함수로 뺄 수 있기 때문에 useEffect()에서 실행해야 하는 함수를 별도의 파일로 .. 리액트 bind(), state 수정, props에서 함수 만들기. 1. bind() bind()는 어떤 함수에서 this 값으로 특정 객체를 받고싶을 때 사용한다. 함수선언이 끝나는 부분이나 함수 이름 뒤에 .bind(원하는 객체이름)을 덧붙여주면 this 값을 매개변수에 넣은 객체로 받는 새로운 함수가 생겨난다. **또한 bind()는 인자를 여러 개 받을 수도 있다. bind(this, 인자1, 인자2) -> function(인자1, 인자2) 2. state 수정 state는 처음 초기화된 이후 쉽게 바꿀 수 없다. 반드시 위와 같은 함수를 이용해서만 바꿀 수 있다. setState()를 통해서 수정해야만 리액트가 state값이 변화된 것을 알고 render()를 재호출할 수 있다. 3. props에서 함수 만들기 리액트 state 1. 값이 한 개일 때. render() 함수 실행 전에 미리 초기화하고 싶은 코드는 constructor(props) 안에 작성한다. 이러한 내용은 this.state = { subject: {title: 'WEB', sub: 'World Wide Web'} } 와 같이 작성되고 이는 외부에서 접근이 불가능하다. 앱이 내부적으로 사용할 상태는 state라는 형태로 구현한다. ** 상위 컴포넌트인 App의 state를 하위 컴포넌트에 전달하고 싶을 때에는, 그것을 하위 컴포넌트의 props(속성) 값으로 넣어주면 된다. 2. 값이 여러 개일 때. 리액트에서는 props값이나 state 값이 변하면 해당 클래스의 render()가 다시 호출되도록 약속됨. 리액트 - 컴포넌트 파일로 쪼개기 js 파일을 만들고 Component를 import한 뒤 컴포넌트 클래스를 구현한다. export는 본 클래스의 사용 범위를 지정한다. 그리고 App 파일에 컴포넌트를 import해주면 끝 리액트 개발자 도구 크롬 웹 스토어에서 React Developer tools를 다운받으면 개발자도구에 Components 메뉴가 추가된다. 이를 통해 리액트 식으로 html 문서를 확인할 수 있고, 개발자 도구로 바로 props를 수정할 수도 있다.!! 리액트 컴포넌트 만들기 - 정리 도구. 위와 같은 것을 '리팩토링'이라 부른다. 이전 1 다음
