Enjoy Programming

react에서 컴포넌트에 prop을 보내는 것 까지는 해봤는데 이게 부모 컴포넌트로부터 전달 받은 prop이 내가 예상한 prop인지 확인할 수 있어야 한다. 항상 보이지 않는 에러를 방지하기 위해서는 꼼꼼한 체크가 필수 이다. 이제 체크하는 방법을 알아보자. 이전 포스팅 코드를 그대로 쓰면서 체크해 보겠다. 먼저 list에 객체들에 각각 rating을 추가하자. rating은 모든 것을 평가한다. rating: 5.1 이런식으로 임의의 숫자를 추가한다 그리고 prop-types를 설치해준다. prop-types 라이브러리는 내가 전달 받은 props가 내가 원하는 props인지 확인 해주는 라이브러리이다. 설치가 끝났으면 import PropTypes from "prop-types"; 임포트 해주고 F..

앞서 포스팅한 내용중 복사 붙여넣기로 컴포넌트에 다른 값을 계속 주는 것은 효율적이지 못하다. 예를들어 브라우저에서 데이터가 오면 그 데이터를 복사 붙여넣기로 넣을 수 없기 때문이다. 이제 웹사이트에 동적 데이터를 추가하는 방법을 알아야 한다. 예를 들어 서버에서 좋아하는 음식의 이름과 이미지가 담긴 리스트 데이터가 온다고 생각해보자 그럼 이 데이터들을 어떻게 하나씩 처리 할 것인가. 우선 가짜 리스트를 하나 만들어본다. 음식의 이름과 이미지가 담긴 리스트이다. 니코는 말한다 react는 just javascript라고 ~ 자 리스트 배열에 담긴것을 하나씩 무언가 적용시킬 때 쓰는 함수는? forEach도 있고 map도 있지만 여기서는 내가 적용시킬 것을 적용하고 그대로 리스트를 반환 할 것이므로 map..

이번에는 동일 파일 안에서 작업을 해보자 이렇게 동일 파일 안에서 한 컴포넌트에 다른 컴포넌트를 넣어서도 사용 가능하다 jsx에서는 component에 정보를 보낼 수 있다. react는 기본적으로 재사용 가능한 component를 만들 수 있다. 반복적으로 사용가능하다는 말이다. 이제 jsx문법을 간단히 보며 시작해보자 props(propertys)와 함께~ 먼저 무비 컴포넌트를 만들어주고 I love thor라고 텍스트를 지정해줬다. 메인 컴포넌트인 App에 라고 입력해주면~ 변화는 없다. 여기서 name은 html에서 class=~ id=~이런 속성이다 name 속성~ 자 변화를 시켜보자 현재 movie컴포넌트에 parasite라고 value로 prop name을 지정해줬다. name이 아니어도 되..

react 에서 component는 HTML을 반환하는 함수이다. 위 react.StrictMode라고 되어있는 태그형태안의 가 컴포넌트의 형태이다. App은 다른 자바스크립트 파일에서 만든 export된 function형태의 html을 반환하는 함수인 것이다. 반드시 HTML처럼 작성해야한다. 이렇게 처럼 자바스크립트와 html사이의 조합을 jsx라고 한다. react에서 나온 매우 custom한 유일한 개념이다. 자 새로운 컴포넌트를 한번 만들어보자. src 폴더에 BlueBerry라는 자바스크립트 파일을 하나 만들고 중요한 건 컴포넌트에는 반드시 react를 import해줘야 리액트가 인식 할 수있다. 안에 블루베리 함수를 하나 만들어 리턴해준다. 그리고 모듈을 export해주면 사용가능한 comp..

자 이제 react를 배운다. nomad coder 의 react 로 영화앱만들기 코스로 배워보기로 한다. 먼저 react가 무엇인가. react는 현업에서 인기 있는 웹.앱 의 view를 개발 할 수 있도록 하는 라이브러리이다 즉 사용자가 조작하기 위한 UI를 만드는 것을 도와주는 라이브러리이다 특징으로는 1. 선언형 프로그래밍 : 먼저 프로그래밍은 선언형과 명령형으로 나뉜다. 선언형 - 함수형, 논리형, 제한형 프로그래밍 언어로 쓰인경우이다. 선언형 프로그램은 목표를 명시하고 알고리즘을 명시하지 않는다. 명령형 - 프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하는 프로그래밍. 명령형 프로그램은 알고리즘을 명시하고 목표는 명시하지 않는다. 리액트는 선언형 성격에 맞게 원하는 결과를 ..

즉시 실행 함수 표현 - IIFE IIFE는 정의되자 마자 즉시 실행되는 자바스크립트 함수이다. 기본 구조는 (function () { statements } ) (); 이다. 이는 self-executing anonymous Function으로 알려진 디자인 패턴으로 크게 두 부분으로 구성된다. 첫 번째는 괄호 ((), Grouping Operator)로 둘러싸인 익명함수. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지 할 수 있을 뿐 아니라 IIFE 내부 안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다. 두 번째 부분은 즉시 실행 함수를 생성하는 괄호()이다. 이를 통해 자바스크립트 엔진은 함수를 작시 해석해서 실행. 표현 내부의 변수는 외부로부터의 접근이 불가능하다. ..