React 썸네일형 리스트형 코딩앙마 React공부 (이벤트 처리) 1. 미리 함수로 만들어놓고 전달해주는것 2. 두번째로 내부에 직접 함수 작성하는 법 (장점 = 매개변수를 전달하기 편하다) 3. input창을 만들고 작성할때 마다 로그를 찍는 방법 더보기 코딩앙마 React공부 (CSS 작성법) create-react-app으로 만든 프로젝트라면 별도의 패키지 설치없이 바로 사용할 수 있는 방법이 3가지가 있다. 1. inline style 사용 (css파일을 따로 생성하지 않고 HTML태그에 바로 작성하는 방법)주의할 점, 객체로 작성해야한다 / 카멜케이스로 작성해야한다.일반적으로 마크업할때도 마찬가지겠지만, 특별한 이유가 없으면 inline으로 작성하지 X 2. 프로젝트 생성시 만들어지는 css파일들을 사용하는 방법(index.css는 전체 프로젝트에 영향을 미치는 css이고, App.css는 App컴포넌트에 한정되어있는 내용들이 들어가있는것을 볼수 있다.)한가지 문제점이 있다면, App.css는 App컴포넌트에만 적용되는것이 아니다. 예를 들어,box라는 className을 생성하고 .. 더보기 코딩앙마 React 공부(첫 컴포넌트 만들기) 컴포넌트를 생성하기위해 컴포넌트 폴더를 만들고 컴포넌트 파일을 생성한다 (컴포넌트는 대문자로 시작해야한다.) 컴포넌트 작성 방법 3가지 작성한 컴포넌트를 사용하는 방법 App.js로 가서 import Hello from './component/Hello';를 작성하여 컴포넌트를 import시켜준다. 컴포넌트를 원하는 위치에 작성해준다 (HTML 태그처럼 작성) 만약 와 사이의 ddd가 적힌 부분에 내용이 들어갈 필요가 없다면 만 작성해도된다. 이대로 저장을 하게되면 에러가 나거나 아무것도 안뜨는 하얀 화면 일것이다. (=> 왜냐? p태그는 return을 시켜줘야하기 때문) 이제 Welcome이라는 컴포넌트를 생성하고 위와 똑같은 방식으로 실행해보자 다음은 World라는 컴포넌트 생성후 Hel.. 더보기 코딩앙마 React 공부(컴포넌트, JSX) React로 만든 페이지는 컴포넌트로 구성되어 있다. 페이지 단위로 HTML을 작성하는 것이 아닌 각 부분을 컴포넌트로 만들어서 조립해서 사용하는 것이다. (=> 코드의 재사용과 유지보수) 전에 공부했던 것이 그대로 남아있다면 하나의 컴포넌트(App.js)가 있을것이다. App컴포넌트는 함수로 만들어져있고 Default로 export 되고 있다는 것을 알수있다. 이것을 indes.js에서 import해서 사용하고있다 함수로 만들어진 컴포넌트 = 함수형 컴포넌트모든 컴포넌트는 대문자로 시작해야 한다. (함수가 리턴하는 것은 JSX(=JavaScript XML)이다.) class는 자바스크립트 예약어기 때문에 className으로 작성해야한다. style은 객체로 전달해야 적용된다. css에서 쓰는 .. 더보기 코딩앙마 React 공부 (설치 및 폴더 구조 이해 하기) npx create-react-app 폴더명 (ex : npx create-react-app voca) 이후 npm start를 통해 웹페이지를 띄우기 src폴더에 App.js를 열고 p태그를 수정해보면 띄운 페이지에 수정사항이 그대로 반영되는것을 확인할 수 있다. 이제 App.js에서 뭔가를 수정하거나 작성하면 브라우저에 바로 반영이 된다 -> 이걸 Hot Module Replacement(HMR)이라고 한다.터미널에서 ctrl+c를 누르면 프로젝트가 내려간다. 하지만 프로젝트를 다시 띄울수 있는데 그 명령어는 package.json파일에 명시 되어있음 - start : 개발모드로 프로그램을 실행- build : 실제 배포 모드로 만들어줌- test = 테스트- eject : 내부 설정 파일을 꺼내.. 더보기 이전 1 2 다음
