React26 3. 리액트 기초 개념 알아보기 컴포넌트, JSX, props 이 3가지 개념을 꼭 알아야 리액트 앱을 잘 만들 수 있다. App()함수의 반환값이 많아지면 소괄호로 감싸야된다. App 컴포넌트를 임포트해서 사용한것을 볼 수 있다. ReactDOM.render() 함수의 첫 번째 인자로 전달하면 App 컴포넌트가 반환하는 것들을 화면에 그릴 수 있다. 두 번째 인자에는 컴포넌트가 그려질 위치를 전달하면 된다. Potato 컴포넌트를 만들어보자. 작성할 때 중요한 규칙은 이름은 대문자로 시작해야된다. 그리고 컴포넌트가 반환할 값은 JSX로 작성한다. export default Potato;를 추가하면 다른 파일에서 Potato 컴포넌트를 사용할 수 있다. App 컴포넌트가 반환할 값으로 를 추가해보자. 리액트가 를 해석해서 I love .. 2020. 7. 26. 2. 리액트로 클론 코딩 시작하기 create-react-app 이라는 보일러 플레이트로 리액트 개발을 시작해볼거다 먼저 리액트 앱을 만들어보자. movie_app_2020이라는 폴더가 생성될거다. yarn start를 입력하면 앱을 실행시킬수 있다. Ctrl + C 를 누르면 리액트 앱이 종료된다. 리액트는 우리가 작성하거나 수정한 프로젝트 폴더에 있는 코드를 자바스크립트를 이용하여 해석한다. 그리고 해석한 결과물을 index.html로 끼워 넣는다. 저 아이디가 root인 엘리먼트에 App 컴포넌트를 그린다고 생각하면 된다. 즉, App.js에서 작성한 코드를 index.html의 아이디가 root인 엘리먼트에 넣어주는거다. 리액트는 처음부터 모든 HTML을 그려넣지는 않기 때문에 빠르다. ※ 본 포스팅은 개인 공부 기록을 목적으로 .. 2020. 7. 25. [생활코딩] React - 샘플 웹앱 실행 Visual studio code의 장점은 터미널을 선택하면 명령어로 컴퓨터를 제어할 수 있는 프로그램이 내장되어 있다. 저 터미널에 yarn start라고 치면 새로운 웹 페이지가 뜬다. ctrl + C 를 누르면 실행이 중지된다. 저 웹앱은 public 폴더의 index.html을 실행한 결과이다. 컴포넌트들은 저 id가 root 태그에 들어가도록 약속이 되어있다. APP 컴포넌트가 들어가있는것을 확인해볼수있다. 대부분의 파일은 src디렉토리안에 넣을것이다. 그 중에서 진입 파일은 index.js라는 파일이다. App.js 파일이 함수형으로 선언되어 있는것을 class형식으로 변경해주자. ※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다. 2020. 7. 25. [생활코딩] create-react-app 설치 npm으로 create-react-app 을 만들것이다. ※ 만약 설치 시 EACCES 에러가 발생한다면 저 명령어 앞에 sudo를 붙여준다. npm과 npx 차이 npm이 프로그램을 설치하는 프로그램이라면, npx는 이 create-react-app 이라는 프로그램을 임시로 설치해서 딱 한번 실행시키고 지우는 애라고 생각하면 된다. (공간을 낭비하지 않을수있고 매번 다운받아야되므로 최선버젼상태 유지가능) 이제 개발환경을 어디에 셋팅할것인지 알아보자. react-app이라는 폴더를 만들어서 cmd로 그 폴더가 있는 경로로 이동한 다음에 create-react-app . (점을 꼭 적어준다)이라고 입력하면 리액트 환경이 만들어진다. ※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부.. 2020. 7. 25. 이전 1 ··· 3 4 5 6 7 다음
