React 썸네일형 리스트형 [react.js]비구조화 할당 방법 비구조화 할당 말이 좀 어려워서 저도 이 말을 처음에 듣고 뭔말인가 했었는데요. 구조화 되어 있는걸 파괴(비구조화) 한다는 뜻입니다. 본래 구조 대로 적었다면 훨씬 많은 텍스트를 적었어야 했는데, 구조를 깸으로서 간소화시켜주는 겁니다. App.js import React, { Component } from 'react'; import FunctionTest from './FunctionTest'; class App extends Component { render() { return ( ); } } export default App; FunctionTest.js import React from 'react'; const FunctionTest = props => { // const hello = props.. 더보기 [react.js]props.children 사용법 설명하는 것보다 간단한 예제로 이해하는 것이 좋을것 같아요. App.js 첫번째 App.js 를 아래와 같이 구현할것 import React, { Component } from 'react'; class App extends Component { render() { return ( App ); } } export default App; Child_test.js 테스트할 children 파일을 생성 import React, { Component } from 'react'; class Child_test extends Component { render() { return child_test; } } export default Child_test; App.js 에 Child_test.js 연결 import R.. 더보기 [react.js]defaultProps 사용방법 기본으로 props 형태를 선언해주지 않았을때 기본으로 실행하게끔 할 방법 import React, { Component } from 'react'; class App extends Component { static defaultProps = { question: '사랑' }; render() { return ( 믿음, 소망, 사랑 중 그 중의 제일은 {this.props.question}이라 ); } } export default App; 이런 형태로도 써줄 수 있습니다. import React, { Component } from 'react'; class App extends Component { render() { return ( 믿음, 소망, 사랑 중 그 중의 제일은 {this.props.ques.. 더보기 [react.js]style css 표현방법 style css 표현법 우선 일반적인 형태는 이런식으로 씁니다. import React, { Component } from 'react'; class App extends Component { render() { const textcolor = { color: '#666' }; const colorname = '회색'; return ( 제가 선택한 컬러는 {colorname}입니다. ); } } export default App; 이렇게 변수 선언 없이 태그 안에서 바로 쓸수도 있습니다. import React, { Component } from 'react'; class App extends Component { render() { const textcolor = { color: '#666' }; c.. 더보기 [react.js]IIFE 함수 IIFE 함수 Imediately Invoked Function Expression JSX 안에서 함수를 실행시키고 싶을때 사용. 권장하는 방법은 아님 { (function(){ alert('test'); })() } 더보기 [react.js]react-icons 사용하는 방법 react 아이콘 사용하기 https://react-icons.netlify.com/#/ 여기 사이트로 접속하세요. 설치방법 yarn add react-icons 사용방법 저는 이 중에서 IonIcon을 사용해보겠습니다. IonIcon 중에서도 갯수 다양하죠? 저는 닫기 아이콘을 사용해보겠습니다. ctrl+f 를 누르고 찾기를 누르면 됩니다. import { ICON_NAME } from "react-icons/io"; //예) import { IoIosClose } from "react-icons/io"; // 맨위에서 사용하고픈 아이콘을 골라 Icon_name에 써줍니다. *** //위에서 불러온 형태 그대로 사용해줍니다. 옵션 추가 import { ICON_NAME } from "react-icon.. 더보기 이전 1 2 3 다음
