전체 글307 React 에서 css 적용하기 (6가지) github.com/Khan/aphrodite 0. 상위 컴포넌트에 className을 넣으면 하위 컴포넌트에서 props로 받아올 수 있다. return( ) const 컴포넌트명 = ( { className } ) => { } 1. inline styling class MyJob extends React.Component { render() { return ( Hello Style! ); } } 2. JavaScript Object class MyJob extends React.Component { render() { const hstyle = { color: "black", backgroundColor: "blue", fontFamily: "Arial" } return ( Hello Style! ).. 2020. 9. 10. 배열함수 개념과 APIs www.youtube.com/watch?v=yOdAVDuHUKQ [looping] 1. for( ){ } 2. for( let 임의의 변수명 of 정의된 변수명(배열) ){ } 3. forEach( ①콜백함수(3가지의 인자: value, index, array), ②Argument ){ } [Addition, deletion, copy] 1. add an item to the end : push( ) 2. remove an item from the end : pop( ) 3. add an item to the beginning : unshift( ) 4. remove an item from the beginning : shift( ) ** push와 pop은 마지막 데이터를 사용하기 때문에 비교적 빠르다.. 2020. 9. 9. 컴포넌트의 디자인 패턴: Stateless Component 무상태 컴포넌트 무 상태 컴포넌트는 재사용성이 굉장히 높은 컴포넌트를 작성할 수 있게 도와줍니다. 컴포넌트를 완전한 함수로 정의한다는 점이 특징입니다. 개인적으로는 더욱 명확한 의미를 전달할 수 있다는 점에서 state가 없을 경우엔 무상태 컴포넌트로 작성합니다. 기본 컴포넌트에서 보여드렸던 예제를 이용해 보면 다음과 같습니다. medium.com/little-big-programming/react%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-92c923011818 type#1 : 기본 컴포넌트 const Button = ( props ) => ( ) type#2 : .. 2020. 9. 4. React의 API호출 fetch('https://api주소') ← "fetch란 가져오다" .then(response => response.json()) ← "다음에 ~을 하겠다" | 가지고 온 데이터는 response 인자로 받는다. response를 json파일의 형태로 변환. .then(json => console.log(json)); ← "다음에 ~을 하겠다" ↓결과 { "userId" : 1, "id" : 1, "title" : "hi how are you" "completed" : false } class ApiExample extends React.Component { ** class형 컴포넌트는 props를 기본적으로 가지고 있기 때문에 constructor()를 통해 props를 "초기화" 해야 한다. ① c.. 2020. 9. 2. React Hooks: "useState" useState함수는 배열값을 리턴한다 그리고 useState함수 안에 배열에는 2개의 값만 존재고 2개만 사용할 수 있다. 하나는 초기값([value] Primitive data type: undefied), 나머지 하나는 함수([update the value] f())이다. [Hook을 사용한 방식] Using State Hook import React, { useState } from 'react'; ← useState를 불러온다. function Example() { // 새로운 state 변수를 선언하고, count라 부르겠습니다. const [ count, setCount ] = useState(0); ← 변수(count) 초기값은 '0'이다. setCount는 변수(함수형)이다. return.. 2020. 9. 2. JavaScript 정보 (ES6: ECMAScript) https://beomy.tistory.com/category/JavaScript 2020. 9. 2. 이전 1 ··· 44 45 46 47 48 49 50 ··· 52 다음
