ttaeng_99 's 개발의 흔적들 ttaeng_99 's 개발의 흔적들

Front-End(Web)/React - 프레임워크(React, Next)

• [React.js] Props

  Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 26. 20:49

  🤷 Props(Properties) 란? 컴포넌트의 정보를 가지고 있는 객체(Object)이다. 상위 컴퍼넌트가 하위 컴퍼넌트에게 전달하는 용도로 주로 사용된다.(반대는 불가!) 📒 Props 선언 및 표시 JSX의 속성과 같이 선언할 수 있으며, 'this.props.속성명'으로 render() 함수에서 표현 가능하다. import React from 'react'; import ReactDOM from 'react-dom'; class Greeting extends React.Component { render() { return Hi there, {this.props.firstName}!;// props 표현 } } ReactDOM.render( ,// props firstName 선언 documen..

  Read More
• [React.js] Components Interact, Import/Export

  Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 26. 00:28

  🤷 Component(컴포넌트)의 상호작용이란? React App은 수많은 컴포넌트들로 구성되어 있으며, 각각이 담당하는 정보의 display가 있다. React가 유행하는 이유는 단순히 UI를 컴포넌트로 구분해서가 아닌, 그들의 상호작용에 기인했음을 알고 시작했다. 📒 Component Interact 클래스형 컴포넌트의 render() 함수는 JSX뿐만 아니라, 다른 컴포넌트도 반환할 수 있다. class OMG extends React.Component { // JSX() return render() { return Whooaa!; } } class Crazy extends React.Component { // Component(OMG) return render() { return ; } } 이렇듯..

  Read More
• [React.js] Component 기본

  Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 24. 20:54

  🤷 Component(컴포넌트)의 이해 React 프로젝트의 UI를 독립적이고 재사용이 가능하도록 나눈 최소 단위를 Component라고 한다. (반복적인 패턴구현 용이) Javascript 함수와 유사하다. 'props'라는 입력을 받은 뒤, React element를 반환한다고 이해하자. * 컴포넌트는 단순한 템플릿이 아님! - 주어진 데이터를 반영한 UI를 구성하며, Lifecycle API로 켤 때, 변할 때, 꺼질 때 각각 구현도 가능! - UI / UX 개념과 차이점 UI(User Interface): 사용자가 App을 사용할 때 마주하는 디자인, 레이아웃, 인터페이스 등 기술적인 부분을 얘기한다. 단순히, 보여지는 화면만을 얘기하는게 아니라, 폰트/칼라/줄간격 같은 세부요소 및 반응형/애니메..

  Read More
• [React.js] JSX(Syntax extension for JS)

  Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 23. 23:44

  🤷 React.js 사용하는 이유 [빠름, Virtual DOM] React is fast. Apps made in React can handle complex updates and still feel quick and responsive. [간결함] React is modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. React’s modularity can be a beautiful solution to JavaScript’s maintainability problems. [대용량에 유리] React is scalable. Large programs that display a ..

  Read More