{"componentChunkName":"component---src-templates-blog-js","path":"/blog/react/react_20200412/","result":{"data":{"markdownRemark":{"html":"

React Basic - (8) 정리

\n

Food 예제

\n
\n

다양한 객체 선언 방식

\n
\n
const Food = ({fav, some, array}) => {\n  return (\n    <div>\n      <h1>My Favorite food is {fav}</h1>\n      <h2>{`This is ${some? 'true' : 'false'}`}</h2>\n    </div>\n  );
\n
function Food(props) {\n  return (\n    <div>\n      <h1>My Favorite food is {props.fav}</h1>\n      <h2>This is {`${props.some? 'true' : 'false'}`}</h2>\n    </div>\n  );
\n
function Food({ fav, img }) {\n    return (\n        <div>\n            <h1>My Favorite food is {fav}</h1>\n            <img src={img} />\n        </div>\n    );\n}
\n
\n

map() 함수를 통해 배열을 다른 형태로 바꾸는 다양한 방식

\n
\n\n
const foodList = foodILike.map(food => (\n    <Food fav={food.name} img={food.image} />\n));
\n\n
const foodList = foodILike.map(function(food) {\n    return <Food fav={food.name} img={food.image} />;\n});
\n\n
return (\n\t<div>\n\t\t{foodILike.map((dish)=> (\n       <Food\n        fav={dish.name}\n        img={dish.image}\n      />\n    ))}\n\t</div>\n);\n...
\n\n
return (\n\t<div>\n\t\t{foodILike.map(renderFood)}\n\t</div>\n);\n...\n\nfunction renderFood(dish) {\n  return <Food key={dish.id} name={dish.name} img={dish.image}/>;\n  // key는 객체의 prop으로 넣을 필요가 없다. 기본적으로 react 내부에서 사용하기 위한 것이기 때문\n}
\n
{console.log(foodILike.map(renderFood))}\n        {/* ERROR: Each child in a list should have a unique \"key\" prop. */}\n        {/* => 리스트의 모든 요소들은 유일한 key property를 가지고 있어야 함.*/}\n해결 방법 : 배열의 각 요소에 id값을 부여한다.
\n
\n

전체 Code

\n
\n
import React from \"react\";\nimport PropTypes from \"prop-types\";\n\n// 객체 선언 : 방법 1\n/* const Food = ({fav, some, array}) => {\n  return (\n    <div>\n      <h1>My Favorite food is {fav}</h1>\n      <h2>{`This is ${some? 'true' : 'false'}`}</h2>\n    </div>\n  );\n} */\n\n// 객체 선언 : 방법 2\n/* function Food(props) {\n  return (\n    <div>\n      <h1>My Favorite food is {props.fav}</h1>\n      <h2>This is {`${props.some? 'true' : 'false'}`}</h2>\n    </div>\n  );\n} */\n\n// 객체 선언 : 방법 3\nfunction Food({ fav, img, rating }) {\n    return (\n        <div>\n            <h1>My Favorite food is {fav}</h1>\n            <h4>{rating}/5.0</h4>\n            <img src={img} />\n        </div>\n    );\n}\n\nFood.propTypes = {\n    /*  각 prop 요소가 가져야 하는 형태를 정의함\n  : PropTypes를 통해 각 prop의 형태 / 존재 여부를 체크할 수 있음 */\n    name: PropTypes.string.isRequired,\n    image: PropTypes.string.isRequired,\n    // => .isRequired 가 없으면 undefined도 가능\n\n    /* rating: PropTypes.string.isRequired\n  => rating이 string이어야 함. but 위 배열에서는 rating이 숫자로 표시되어 있기 때문에 console에서 ERROR 발생 */\n    rating: PropTypes.number.isRequired\n};\n// return 안에 들어가는 {}는 모두 JSX임\n\nconst foodILike = [\n    {\n        id: 1,\n        name: \"chicken\",\n        image:\n            \"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2\" +\n            \"Fth%3Fid%3DOIP.mIpo5pgFWyhPe1Iin4I8yQHaFF%26pid%3DApi&f=1\",\n        rating: 5\n    },\n    {\n        id: 2,\n        name: \"pork belly\",\n        image:\n            \"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2\" +\n            \"Fth%3Fid%3DOIP.UmVEcfZCr9vDfLdcnDyoLAHaFj%26pid%3DApi&f=1\",\n        rating: 4\n    },\n    {\n        id: 3,\n        name: \"milkshake\",\n        image:\n            \"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2\" +\n            \"Fth%3Fid%3DOIP.szKYcXQeNsJiTp6ScAw2mwHaEw%26pid%3DApi&f=1\",\n        rating: 3\n    },\n    {\n        id: 4,\n        name: \"sushi\",\n        image:\n            \"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2\" +\n            \"Fth%3Fid%3DOIP._1YtdtHAiKCeGlC1piszvgHaEv%26pid%3DApi&f=1\",\n        rating: 4.5\n    }\n];\n\nfunction App() {\n    // map : 방법 1 (새로운 배열 생성 => map 내부에 arrow function 선언)\n    /*   const foodList = foodILike.map(\n    (food) =>(\n      <Food\n        fav={food.name}\n        img={food.image}\n      />\n    )\n  ); */\n    // map : 방법 2 (새로운 배열 생성 => map 내부에 일반 function 선언)\n    /*  const foodList = foodILike.map(function(food) {\n    return (\n      <Food\n        fav={food.name}\n        img={food.image}\n      />\n    )\n  }); */\n    return (\n        <div>\n            {/* map : 방법 3 (arrow function 사용) */}\n            {/* {foodILike.map((dish)=> (\n         <Food\n          fav={dish.name}\n          img={dish.image}\n        />\n       ))} */}\n\n            {/* map : 방법 4 (외부 Function 사용)*/}\n            {console.log(foodILike.map(renderFood))}\n            {/* ERROR: Each child in a list should have a unique \"key\" prop. */}\n            {/* => 리스트의 모든 요소들은 유일한 key property를 가지고 있어야 함.*/}\n\n            {foodILike.map(renderFood)}\n        </div>\n    );\n}\nfunction renderFood(dish) {\n    return (\n        <Food\n            key={dish.id}\n            name={dish.name}\n            img={dish.image}\n            rating={dish.rating}\n        />\n    );\n    // key는 객체의 prop으로 넣을 필요가 없다. 기본적으로 react 내부에서 사용하기 위한 것이기 때문\n}\n\nexport default App;
\n

State & Component Life Cycle

\n
\n

React Component

\n
\n\n
\n

setState()

\n
\n\n
// 방법 1\nthis.setState({\n    count: this.state.count + 1\n});\n// => 권장하지 않는 방식.\n\n// 방법 2\nthis.setState(current => ({\n    count: current.count++\n}));\n// react가 기본적으로 제공하는 current 변수 이용.
\n
\n

render() 함수에서의 state 사용

\n
\n
// 방법 1\nreturn <div>{this.state.isLoading ? \"Loading\" : \"We are ready\"}</div>;
\n
// 방법 2 => ES6\nconst { isLoading } = this.state;\nreturn <div>{isLoading ? \"Loading...\" : \"We are ready\"}</div>;
\n
\n

Component Life Cycle

\n
\n\n
\n

setTimeout()

\n
\n

일정 시간 후에 state가 변하도록 설정

\n
setTimeout(\n    () =>\n        this.setState({\n            isLoading: false\n        }),\n    3000\n);\n// 3초 후에 isLoading이 false로 변경됨.
\n
\n

전체 Code

\n
\n
import React from \"react\";\n\nclass App extends React.Component {\n    state = {\n        count: 0\n    };\n    constructor(props) {\n        super(props);\n        console.log(\"constructor called\");\n    }\n    add = () => {\n        this.setState(current => ({\n            count: current.count++\n        }));\n    };\n    minus = () => {\n        this.setState({\n            count: this.state.count - 1\n        });\n    };\n    render() {\n        console.log(\"I'm rendering\");\n        return (\n            <div>\n                <h1>The number is {this.state.count}</h1>\n                <button onClick={this.add}>Add</button>\n                <button onClick={this.minus}>Minus</button>\n            </div>\n        );\n    }\n    componentDidMount() {\n        console.log(\"component rendered\");\n    }\n    componentDidUpdate() {\n        console.log(\"I just updated\");\n    }\n}\nexport default App;
","id":"63724fce-f9bf-506a-8351-db7bc5eb9bb2","frontmatter":{"title":"[React] React Basic - (8) 정리","date":"2020-04-12T00:00:00.000Z","description":null},"fields":{"slug":"/blog/react/react_20200412/"}}},"pageContext":{"slug":"/blog/react/react_20200412/"}}}