고코몽의 프론트엔드 저장소 고코몽의 프론트엔드 저장소

React/Basic

• React - Component LifeCycle

  React/Basic 2021. 6. 3. 22:57

  https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl 자주 사용되는 생명주기 메소드 Mount - 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입 constructor() render() - 최초 렌더 componentDidMount() Update - Props 또는 State가 변경되면 Update 발생(re-rendering) render() componentDidUpdate() Unmount - 컴포넌트가 DOM 상에서 제거될 ..

  Read More
• React - Event Handling

  React/Basic 2021. 6. 3. 22:42

  Event Handling camelCase 로만 사용 가능 예) onClick, onMounsEnter 이벤트에 연결된 자바스크립트 코드는 함수 예) 이벤트={함수} 실제 DOM 요소들에만 사용 가능 리엑트 컴포넌트에 사용하면 props로 전달

  Read More
• React - Props & State

  React/Basic 2021. 6. 3. 22:32

  Props : 컴포넌트 외부에서 컴포넌트에게 주는 데이터 State : 컴포넌트 내부에서 변경할 수 있는 데이터 둘 다 변경이 발생하면 re-render 발생할 수 있음 현재는 React Hook으로 인해 class Component에서의 State 방식을 사용하지 않음 // Props 예제 function Component(props) { return ( {props.message} ); } // Default Props Component.defaultProps = { message: 'Default Props', }; ReactDOM.render( , document.querySelector('#root') ); // State 예제 class Component extends React.Compone..

  Read More
• React - JSX

  React/Basic 2021. 6. 3. 22:07

  JSX 문법은 Babel compiler를 통해 순수한 JavaScript로 컴파일 되어 사용 가능 // JSX hello // Babel Compiler React.createElement("h1", null, "hello"); JSX 사용 이유 가독성 babel 과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉬움 JSX 문법 최상위 요소는 하나여야 함 자식들을 바로 렌더링 하고 싶으면, 사용 ( Fragment ) 자바스크립트 표현식을 사용하려면, {표현식} if문은 사용 불가 삼항 연산자 또는 && 사용 style을 이용해 인라인 스타일링 가능 class 대신 className을 사용 자식요소 태그는 꼭 닫아야 함

  Read More
• React - 라이브러리

  React/Basic 2021. 5. 30. 22:16

  React 핵심 모듈 // React Component -> HtmlElement 연결 import ReactDom from 'react-dom'; // React Component 생성 import React from 'react'; npx serve 해당 폴더를 파일 서버처럼 해주는 명령여

  Read More