코딩브론즈

우리는 항상 부모 component로 부터 전달받은 props가 우리가 예상한 props인지를 점검해야한다. 점검에 앞서 list에 있는 props에 rating을 추가하자. 이런식으로 많은 props를 전달하는것이 가능하다. 그리고 props types 를 설치한다. npm i prop-types 이 prop-types가 할 일은 내가 전달받은 props가 내가 원하는 props인지를 확인해 준다. 우리는 인간이기 때문에 실수를 할 수 있다. Food 컴포넌트가 다른 file에 있거나, 인자가 오타나거나 등등.. 이 때 prop types는 내가 뭘 실수했는지 알려준다. 설치가 완료되면 package.json의 dependencies가 추가된다. 이제 prop-types를 사용해보자. 먼저 App.js..

Map을 좀더 연습하기위해 기존의 코드를 고쳐보자. 콘솔 로그를 찍으면 어떻게 나올까? 뭔가 이상한게 잔뜩 나온다. 이것들은 기본적으로 react component이다. 따라서 여기에 Food component와 같은 array를 가져오는 것이다. 기존코드와 기능은 완전히 똑같다. 하지만 기존의 상태가 더 좋다. 다른 function을 만들 필요는 없다. 그렇다면 error는 뭐지? 읽어보면 각각의 list 내의 child는 unique한 key prop을 가져야 한다고 말하고 있다. 모든 react 의 element들은 유일해야한다. 즉, 내가 이들을 list에 집어넣을 때, 유일성을 잃어버린다는 의미이다. 따라서 iteml들에 각각의 id를 부여해주자. react의 모든 element 들은 다르게 보..

기존의 코드는 효율적이지 못하다. 새로운 음식을 추가할 때마다 컴포넌트를 복붙하기에는 너무 비효율적이지 않은가? 일단 데이터가 있다고 시뮬레이션 해보자. 이제 이 긴걸 어떻게 array로 가져오고 자동적으로 내가 좋아하는 음식을 이름과 함께 렌더링 하지? => JavaScript의 Map 함수를 이용해 보자 (다시한번 말하지만 react는 javaScript와 다를바 없다) - Map 함수는 array의 각 item에 function을 적용하고 array를 반환한다. 아래 예시를 보면 대충 감이 올것이다. 이제 내 앱에 적용해보자. 여기서 dish는 각각의 item이다. dish든 뭐든 어떻게 지정하든 상관 없다. 각각의 item(dish)들은 자신의 차례가 되면 화살표와 함께 리턴해준다. 여기선 Foo..

기존의 Zzz.js를 지우고 시작할것이다. (App.js에서만 작업을 하고싶기 때문) 이와같이 App.js 내에서 Zzz함수를 만들어서 호출했다. - component에 정보 보내기 jsx에서 두 번째로 이해해야 하는것은, component에 정보를 보낼 수 있다는 점이다. react가 멋진 이유는 재사용 가능한 component를 만들 수 있다는 점이다. 이 말은 component를 계속해서 반복해서 사용할 수 있다는 의미. Zzz를 Food로 고치고 Food 컴포넌트에 정보를 보내보자. Food 컴포넌트에 fav라는 이름의 property를 kimchi라는 value로 준거임. 이런 property들을 props 라고 부른다. props에는 String, boolean, array등 다양한 타입의 데..

※ React를 계속 진행하고 싶다면 npm start를 실행하고 console을 종료하지 않아야 한다. react는 component와 함께 동작한다. 모든 것은 component임. 당신은 component를 만들게 될 것이고, component를 보기 좋게 만들게 될 것이고 component가 data를 보여주게 할 것이다. component 가 뭔데? => Html을 반환하는 함수이다. 위에서는 App() 함수로 Html을 반환하는 것이다. react는 component를 사용해서 Html처럼 작성하려는 경우에 필요하다. javascript와 Html사이의 이러한 조합을 jsx라고 부른다. ※ jsx는 react에서 나온 매우 custom한 유일한 개념이다. 나머지는 JavaScript를 하는것과..

기본적으로 생성된 App에 3개의 폴더가 있다. 1. node_modules : 우리가 손대는게 아님 2. public - favicon.ico : 상단 탭의 이미지 - index - manifest.json : PWA (지금은 자세히 알 필요 없다) 3. src - serviceWorker, logo, index.js, index.css 등 많은것들이 있다. 이제 간단한 실습을 해보자. - App.js와 index.js 를 제외하고 다 없애버리자. App.js와 index.js의 코드도 그에 맞춰서 지워줘야함. - create-react-app 버전이 올라가서 serviceWorker.js 가 없고 reportWebVitals.js가 있을것이다. 그것도 없애버리자. - 결과 - 실행시 아무것도 안나오면..

지금까지 했던 작업을 나의 깃허브에 저장해보자 1. VSCode를 열고 해당 App의 경로에서 "git init" git init 2. GitHub에 가서 레포지토리를 생성한다. - 이 때, 레포지토리 이름은 package.jason의 "name"으로 일치시키는걸 추천한다. (혼란을 피하자.) 3. URL을 복사 후 git remote add origin git remote add origin https://github.com/laugh4mile/movie_app_2021.git git add . git commit -m "커밋 메시지" git push origin master 4. GitHub 새로고침 GitHub에 완벽히 들어왔다!

facebook/create-react-app Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub. github.com 1. react application 만들기 npx create-react-app movie_app_2021 - movie_app_2021 이라는 앱을 생성함. 이제 해당경로에 movie_app_2021이라는 폴더가 있다. 2. VSCode로 열어보자 - 기존의 README는 지우고 나만의 README를 작성하자. 3. package.jason 을 수정한다. - scripts의 test와 eject는 사..