비동기 심화, 상태끌어올리기 StatesAirline 과제 Part 1

코플릿 5,6

문자열을 입력받아 순서가 뒤집힌 문자열을 리턴해야 합니다.
'reenigne erawtfos taerg a eb lliw uoy'을(를) 입력받은 경우, 'you will be a great software engineer'을(를) 리턴해야 합니다

문제풀이

function firstReverse(str) {
// TODO: 여기에 코드를 작성합니다.
  // let output=''
  // if(str==='') return ''
  // for(let i=str.length-1; i>=0; i--){
  //   output+=str[i]
  // }
  // return output
  return str.split('').reverse().join('');
}

1. for loop을 써서... 저렇게 했는데...
2. 레퍼런스코드를 보니 간단한 자바스크립트 문법으로 표현할 수 있었다.

문자열을 입력받아 문자열을 구성하는 각 단어의 첫 글자가 대문자인 문자열을 리턴해야 합니다.
'what a wonderful life'을(를) 입력받은 경우, 'What A Wonderful Life'을(를) 리턴해야 합니다

문제풀이

function letterCapitalize(str) {
  let newStr = str.split(' ');

  for (let i = 0; i < newStr.length; i++) {
    if (newStr[i].length > 0) {
      newStr[i] = newStr[i][0].toUpperCase()+newStr[i].slice(1)
    }
  }
  return newStr.join(' ')
}

1. str를 array로 바꿔서 입력하고
2. array속 문자열의 첫 letter를 capitalize해준뒤 slice한 나머지를 붙여줬다
3. array를 toString을 사용해 출력하면 "What, A, Wonderful, Life" 이런식으로 되기때문에 join(' ')을 이용해 띄어쓰기를 포함해 출력시켰다.

Part 1

💡 Part 1: 항공권 목록 필터링
🧩 Main 컴포넌트에서 항공편을 조회합니다
✕ Main 컴포넌트 내 search 함수는 검색 조건을 담고 있는 상태 객체 condition을 업데이트해야 합니다 (59 ms)
🧩 Search 컴포넌트를 통해 상태 끌어올리기를 학습합니다
✓ 검색 화면이 Search 컴포넌트로 분리되어야 합니다 (6 ms)
✕ Search 컴포넌트에는 상태 변경 함수 search가 onSearch props로 전달되어야 합니다 (13 ms)
✕ 상태 변경 함수 search는 Search 컴포넌트의 검색 버튼 클릭 시 실행되어야 합니다 (46 ms)

Main.js

  const search = ({ departure, destination }) => {
    if (condition.departure !== departure || condition.destination !== destination) {
      console.log('condition 상태를 변경시킵니다')
      setCondition({departure, destination})
    }
  }
  
  ...
  
  <Search onSearch={search}/>

Search.js

function Search({onSearch}) {
  const [textDestination, setTextDestination] = useState('')

  const handleChange = (e) => {
    setTextDestination(e.target.value.toUpperCase())
  }

  const handleKeyPress = (e) => {
    if (e.type === 'keypress' && e.code === 'Enter') {
      handleSearchClick()
    }
  }

  const handleSearchClick = () => {
    console.log('검색 버튼을 누르거나, 엔터를 치면 search 함수가 실행됩니다')
    onSearch({departure: 'ICN', destination: textDestination})
    // TODO:
  }

1. 상태를 변경시키기 위해 setCondition을 ({departure, destination})으로 지정해주었다.
2. 하위컴포넌트인 Search.js에서 상태를 끌어올리기위해 onSearch를 prop으로 넣어주고, handleSearchClick에서 onSearch를 실행시켰다.
3. 그 뒤, 메인에서 호출한다.