2020.코딩일지

UI, 프론트엔드 개발에서는 state란, 상태란, "UI에 동적으로 표현될 데이터"이다. - 상태의 변경이 일어나고 변경의 영향을 받는곳을 컴포넌트로 분리해서 보는 시각을 기르자! Side Effect란, 함수(또는 컴포넌트)의 입력외에도 함수의 결과에 영향을 미치는 요인 (ex, 네트워크요청, API호출) 예를든 컴포넌트는 API요청이 없이도 이 컴포넌트는 작동되어야한다 어떤 데이터가 들어오는지 상관하지 말고, 설사 데이터가 가짜 데이터라 할지라도 컴포넌트는 표현(presentation) 그 자체에 집중하는 것. React공식문서의 "React로 사고하기" 부분을 읽어야함!!!⭐️중요중요⭐️ 대부분의 경우 form(input box, select box, radio button 등)을 이용한 상태는 ..

useEffect() 언제 실행되나? 컴포넌트 생성 후 처음 화면에 렌더링할 때, 컴포넌트에 새로운 props가 전달되며 렌더링될 때, 컴포넌트에 상태(state)가 바뀌며 렌더링 될 때, --> 매 번 새롭게 컴포넌트가 렌더링 될 때! Effect Hook 실행된다. **Hook사용시 주의점 최상위에서만 Hook호출하기. React함수 내에서 Hook을 호출하기. Effect Hook의 기본(예시)-명언제조 [명언제조]버튼을 클릭할때마다, 랜덤으로 명언이 나오며, 크롬의 타이틀 부분도 같이 변경된다. 더보기 import { useEffect, useState } from "react"; import "./styles.css"; export default function App() { const prov..

🛫StatesAirlline Client part1.에서는 파일2개만 수정하면 된다. useState의 condition 업데이트하기 자식이 부모에게 props전달하기 Main.js 더보기 import Head from 'next/head' import { useEffect, useState } from 'react' import { getFlight } from '../api/FlightDataApi' import FlightList from './component/FlightList' import LoadingIndicator from './component/LoadingIndicator' import Search from './component/Search' import Debug from './c..

import React, { useState } from "react"; export default function ParentComponent() { const [value, setValue] = useState("날 바꿔줘!"); const handleChangeValue = () => { setValue("보여줄게 완전히 달라진 값"); }; return ( 값은 {value} 입니다 ); } function ChildComponent({ qq }) { const handleClick = () => { // 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까? qq(); }; return 값 변경; }

Twittler React - Lifting State Up Hooks import React, { useState } from "react"; import "./styles.css"; const currentUser = "김코딩"; function Twittler() { const [tweets, setTweets] = useState([ { uuid: 1, writer: "김코딩", date: "2020-10-10", content: "안녕 리액트" }, { uuid: 2, writer: "박해커", date: "2020-10-12", content: "좋아 코드스테이츠!" } ]); const addNewTweet = (newTweet) => { setTweets([...tweets, newTwee..

문자열을 입력받아 문자열을 구성하는 각 단어의 첫 글자로 이루어진 문자열을 리턴해야 합니다. 입출력예시 더보기 //입출력예시 let output = firstCharacter('hello world'); console.log(output); // --> "hw" output = firstCharacter( 'The community at Code States might be the biggest asset' ); console.log(output); // --> "TcaCSmbtba" function firstCharacter(str) { if (str === '') { return ''; } let words = str.split(' '); let result = ''; for (let i = 0; i..

수를 입력받아 2의 거듭제곱인지 여부를 리턴해야 합니다. 입출력예시 더보기 //입출력예시 let output1 = powerOfTwo(16); console.log(output1); // true let output2 = powerOfTwo(22); console.log(output2); // false 👻수포자였는데 수학개념을 익힐 수 있는 기회가 되어 기쁘다. 하하핳 두뇌의 간질간질함이 느껴진다:-0 function powerOfTwo(num) { if (num === 1) { return true; } if (num % 2) { return false; } let powered = 2; while (powered < num) { powered = powered * 2; } return powered..

연이율을 입력받아 원금이 2배 이상이 될 때까지 걸리는 시간(년)을 리턴해야 합니다. 입출력예시 더보기 //입출력예시 let output = computeWhenDouble(7); console.log(output); // --> 11 output = computeWhenDouble(10); console.log(output); // --> 8 function computeWhenDouble(interestRate) { let rate = 1 + interestRate / 100; let principal = 1; //원금 let year = 0; while (principal < 2) { //원금이 2배될때까지 principal = principal * rate; year++; } return year..

배열을 입력받아 차례대로 배열의 첫 요소와 마지막 요소를 키와 값으로 하는 객체를 리턴해야 합니다. 입출력예시 더보기 //입출력예시 let arr = ['Queen', 'Elizabeth', 'Of Hearts', 'Beyonce']; let output = transformFirstAndLast(arr); console.log(output); // --> { Queen : 'Beyonce' } arr = ['Kevin', 'Bacon', 'Love', 'Hart', 'Costner', 'Spacey']; output = transformFirstAndLast(arr); console.log(output); // --> { Kevin : 'Spacey' } let arr = ['Queen', 'Eliza..

Create - POST (생성) [단어추가]버튼의 기능구현 // component디렉토리안에 📒CreateWord.js생성 export default function CreateWord() { return; } //📒App.js 상단에 선언 및 경로연결하여 컴포넌트 추가 import CreateWord from "./component/CreateWord"; //📒Header.js에 (버튼있는곳)???버튼태그가없다?????? 경로연결하기 Link to="" 단어 추가 버튼클릭하면 경로 이동하는지 확인 📒CreateWord.js에 단어등록 폼만들기 더보기 export default function CreateWord() { return ( Eng Kor Day 1 2 저장 ); } 하지만 옵션에 하드코딩된..