Frontend/React (5) 썸네일형 리스트형 [React] 이벤트 처리(Handling Events) 1. 미리 함수를 만들어놓고 전달 2. 이벤트 리스너에 직접 함수 작성 이 방법의 장점은 매개변수를 전달할 때 편하다는 것이다. [React] CSS 작성법(module css) 1. inline style CSS 파일을 따로 작성하지 않고 html 태그에 바로 작성한다. 객체(중괄호)로 작성해야 한다. 2. index.css 파일에 작성 index.css는 전체 프로젝트에 영향을 미치고 App.css는 앱 컴포넌트에 한정된 내용들이 들어가 있다. 그런데 한 가지 문제점이 있다. App.css는 앱 컴포넌트에만 적용되는 것이 아니다. App 컴포넌트에 있는 box와 Hello 컴포넌트에 있는 box 모두에 Hello.css가 적용되었다. 같은 클래스명이라서 오버레이된다. CSS 파일들이 각 컴포넌트에 종속되는 것이 아니라 head 부분에 들어가기 때문에 전 페이지에 영향을 미치게 된다. 3. CSS module 각 컴포넌트에 특화된 CSS를 작성하기 위해서 모듈을 활용할 것이다... [React] 컴포넌트 만들기 js 파일을 만들고 함수를 만들고 export 해주면 간단하게 컴포넌트를 만들 수 있다. Hello 컴포넌트와 Welcome 컴포넌트를 만들었다. App.js에서 컴포넌트들을 import하고 html 태그처럼 원하는 위치에 적어주면 된다. World 컴포넌트를 만들고 Hello 컴포넌트 안에서 World 컴포넌트를 import 했다. 이 때 return 안에 div 태그로 묶어주지 않으면 에러가 발생한다. 현재 컴포넌트 구조는 다음과 같다. 한 컴포넌트를 여러 번 사용하는 것도 가능하다. [React] 컴포넌트, JSX 리액트로 만든 페이지는 컴포넌트들로 구성되어 있다. 페이지 단위로 html을 작성하는 것이 아니라, 각 부분을 컴포넌트로 만들어 조립해서 사용한다. 따라서 비슷한 부분들은 코드를 재사용 할 수 있고, 유지보수도 쉬워진다. 예를 들면 다음과 같이 컴포넌트를 나눌 수 있다. 광고 컴포넌트는 비슷하게 동작할 것이기 때문에 같은 컴포넌트를 스타일만 다르게 해서 재활용할 수 있다. 언론사 컴포넌트의 경우 더 작게 나눠 각 언론사 컴포넌트로 쪼개서 재활용 할 수 있다. 현재는 App이라는 컴포넌트 하나만 있는 상태이다. App 컴포넌트는 함수로 만들어져 있다. 이렇게 함수로 만들어진 컴포넌트를 함수형 컴포넌트라고 한다. 모든 컴포넌트는 대문자로 시작해야 한다. 이 함수가 리턴하는 것은 JSX(Javascript X.. [React] 설치(create-react-app) 및 구성 파일 알아보기 리액트 프로젝트를 만들기 위해서는 Node.js와 npm을 반드시 먼저 설치해야 한다. Node.js가 설치되어 있지 않다면 아래 링크에 들어가서 설치해준다. https://nodejs.org/ko/download/ 먼저 create-react-app을 설치하기 위해서 cmd를 실행하고 아래 명령어를 입력한다. npm install -g create-react-app 설치가 되면 첫 react 프로젝트를 설치해보자. 아래 명령어로 프로젝트를 생성한다. npx create-react-app [프로젝트명] 현재 디렉터리 아래에 [프로젝트명] 폴더가 생기고 필요한 라이브러리들이 준비된다. vscode로 해당 폴더를 열고, terminal에 npm start를 입력하면 브라우저가 자동으로 열린다. 또한 자동으로.. 이전 1 다음
