React (4) 썸네일형 리스트형 HOC & Hook & Typscript typescript 를 이용해 hook 으로 hoc 를 만들면서 알게된 내용들을 정리하고자 한다. 수정사항이나 피드백 환영합니당 HOC (Higer Order Component) react 문서에 따르면 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다. 라고 한다. 어떤 component 에 기능만 추가해서 새로운 compoennt 를 반환할 때 사용할 수 있다. 자 이제 typescript 와 hook 을 이용해 hoc 함수를 만들어보자. 만들려는 것 props 로 숫자를 받아서 보여주는 다음과 같은 component 가 있다고 해보자. interface ShowNumberProps { value : number } const ShowNumber = ({value} : ShowNum.. useEffect useEffect React Hook 에서 ComponentDidMount 와 ComponentDidupdate 와 같은 기능을 할 수 있게 해주는 api 다. 공식 홈페이지에서는 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋다고 한다. 참고 링크 https://ko.reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies 사용예 const Test = () => { const [number, setCount] = React.useState(0); React.useEffect(() => { console.log(.. React 공홈 문서 정리(1) JSX Javascript 를 확장한 문법 React element 를 생성함 Babel 은 JSX 를 React.createElement() 를 호출로 컴파일 함 const element = ( a );과 const elemetn = React.createElement( 'h1', {className: 'greeing'}, 'a' )은 동일함 위처럼 생성한 react element 는 ReactDOM.render() 를 통해 렌더링 DOM 에 react element 렌더링 React 로 구현한 것은 일반적으로 하나의 root dom 노드가 있음 react 엘리먼트를 루트 DOM 노드에 렌더링하려면 둘 다 ReactDOM.render() 로 전달하면 됨 con.. LifeCycle api 자세한 것은 https://react-anyone.vlpt.us/05.html 를 참고하자 Mounting API constructor 컴포넌트 처음 만들어질 때 호출되는 함수 constructor(props) { super(props); //Componenet 의 생성자 함수를 호출 } componentDidMount 외부 라이브러리 연동 or 컴포넌트에 필요한 데이터 요청 DOM 에 관련한 작업들 Update API static getDerivedStateFromProps() props 로 받아온 값을 state 로 동기화 해주는 작업을 해주고 싶을 때 사용 ex. 부모 Componenet의 특정 값 (ex. state) 을 자식 Component 의 state 랑 똑같이 만들어 주고 싶을 때 sho.. 이전 1 다음