처음부터 차근차근

컴포넌트 파일 분리 컴포넌트를 만들어서 App.js 안에다 두면 복잡하고 유지보수하기 힘들다. 그래서 컴포넌트를 만들면 각각의 컴포넌트들을 파일로 따로 분리해둔다. 1. src / components 디렉토리를 새로 만든다. 이 안에다가 컴포넌트 파일을 모아둘 것이다. 2. components 파일 안에다 '컴포넌트명.js' 파일을 만든다. 그리고 안에다 코드를 작성한다. import React, {Component} from 'react'; // react랑 Component 임포트 class FooterTab extends Component{ render(){ return ( 제목 ); } } export default FooterTab; // 다른 파일에서 FooterRab을 가져다 쓸 수 있게 만..

주의사항 App.js의 return ( ) 괄호 안에 하나의 만 들어갈 수 있다. 즉 return( ) 안에 있는 것은 하나의 태그로 묶여야 한다. 여러개의 div가 들어가면 안된다. ex) 여러개의 div를 그래도 쓰고싶거나 의미없는 div를 사용하기 싫으면 으로 감싸면 된다. 리액트 Component 문법 html을 나만의 한 단어 바꿔서 그 단어로 줄여서 쓸 수 있는 방법이다. 컴포넌트 안에 컴포넌트를 넣어서 만들 수 도 있다. 어떤것을 component로 만드는 것이 좋을까? -> 반복되는 html 덩어리들, 자주 변경되는 html UI들, 다른 페이지들 component의 단점 state 쓸 때 복잡해진다. component 만드는 법 1. import 코드와 export default App;..

JSX 문법 { 변수명 } { 함수명() } : 함수의 리턴값이 출력된다. { class명 } JSX에서 이미지 넣는 방법 상단에 이미지 import 코드 작성 import 이미지명 from '이미지 파일 경로' 코드 안에다 작성할 때 { }를 사용해서 이미지 경로 불러오기 꼭 이렇게는 안하고 src='이미지명.jpg' 이렇게 직접 넣어도 되는데 위처럼 쓰면 편해서 이 방법을 주로 사용한다. JSX에서 css 넣는 방법 css 인라인시트 style을 넣을 때는 오브젝트형식으로 넣어야한다. 그리고 font-size 처럼 '-'가 있는 것들은 camelCast기법으로 fontSize이렇게 써야한다. 구분자로 ;가 아닌 ,를 써야한다. style="{ { color : white, fontSize : 50px..

React란 react란 자바스크립트 라이브러리의 하나로, 페이스북 회사에서 만들어졌다. react를 사용해서 모바일 애플리케이션 개발할 수 있다. React의 장점 1. 데이터 바인딩이 쉽다. 데이터 바인딩 : 서버에서 가져온 데이터를 자바스크립트를 이용해서 화면에 출력하는 것 서버에서 데이터를 받아온 뒤 변수에 저장하고 넣고 싶은 곳에다 { 변수명 } 해서 넣으면 된다. 기존의 자바스크립트로 데이터바인딩을 하면 document.getElement...이런식으로 코드를 써서 html코드에다가 삽입해야하는데 리액트는 그럴 필요가 없다. 2. html 코드를 내가만든 component사용해 줄여서 사용할 수 있다. React에는 component라는 문법이 있다. 이 문법을 좀 더 깔끔하게 코드를 정리할 ..