프로그래밍/React JS

[영화 웹 서비스 만들기] #2 JSX & PROPS (2) (Key prop , alt, PropTypes)

본 포스팅은 리액트 JS를 다루고 있습니다. #2.3 map Recap Key prop (키 속성) 위의 에러에 따르면 list내의 child는 unique한 key prop을 가져야 한다고 말하고 있다. 즉, 모든 react element들은 유일해야하고있다. 즉, 모든 react element들은 유일해야한다. list 안에 넣으면서 유일성을 잃어버리게 되므로 배열의 각각의 item에 id를 추가하고 component에 key라는 prop을 줌으로써 해결할 수있다. 위의 예시로 설명하면 배열에 있는 정보들은 모두 Food component 함수를 통해 Food component가 되고 우리에게 보여진다. 이렇게 모두 Food component가 되어버려 유일성을 상실한다. 결국 모든 element들이..

[영화 웹 서비스 만들기] #2 JSX & PROPS ( Component, forEach(), filter(), map() )

본 포스팅은 리액트 JS를 다루고 있습니다. # 2.0 Creating your first React Component Localhost Localhost를 게속 유지하고 창을 계속 띄운 상태로 실행시키고 싶다면 npm start 를 하고 console을 종료하지 않아야 한다. x를 눌러서 숨기는 경우는 계속 작동한다. console만 종료시키지 않으면 된다. JSX (1) JS와 HTML의 조합을 JSX라고 한다. React에서 나온 거의 유일한 개념이다. 위의 는 HTML이 아니다. 아래의 return 안에 있는 내용들은 HTML이다. Component 위의 과 같은 것들을 Component라고 한다. react는 component와 함께 동작한다. component를 만들고 보기좋게 만들며 comp..

[영화 웹 서비스 만들기] #1 SET UP (React란?, React App 만드는 법)

본 포스팅은 리액트 JS를 다루고 있습니다. #1.0 Creating your first React App 파일 생성 React app을 사용하기 위해서 콘솔창을 통해 폴더를 생성한다. 위의 순서대로 입력하고 엔터를 치면 해당 이름의 폴더가 자동적으로 생성된 파일과 함께 만들어진다. 명령어 대표적인 명령어에는 start, build, test, eject가 있다. 하지만 start와 build를 중점적으로 알아두면 된다. 실행 Local은 사용하고 있는 컴퓨터에서 실행시키고 싶을 때 주소로 사용될 수 있고, On Your Network는 Wi-Fi를 사용할 때의 주소이다. 따라서 같은 Wi-Fi를 연결하고 해당URL을 통해 폰에서 테스트 해볼 수 있다. 실행이 완료되면 아래와 같은 초기 화면이 뜬다. #..