본문 바로가기

전체 글90

[생활코딩] React - 리액트의 유용성 / 컴포넌트 만들기 리액트가 없다고 가정했을때와 있을때를 비교하면서 리액트의 유용성을 느껴보자. Public이라는 디렉토리는 우리가 create-react-app에서 yarn start를 했을때 파일을 찾는 다큐먼트 루트이다. 저 Public 디렉토리에 리액트가 아닌 html 코드를 짜보겠다. (리액트가 없다고 가정하기 위해) WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 이 정도 웹페이지는 우리가 관리하기 편할것이다. 그러나 각 코드부분이 천만줄이라고 상상해봤을때, 코드가 한눈에 안들어온다. 저 태그는 다른곳에 안보이게 감추고 이름만 로 한다면 가독성이 좋아질것이다. 아래 코드는 컴포넌트를 만드는 코드이다. 저 코드를 해석해보.. 2020. 7. 26.
[생활코딩] React - CSS / 배포 리액트에서 css를 수정하는 방법을 알아보겠다. 저 부분을 수정해보자. 앱을 새로고침 했더니 전체용량 2.1MB를 다운로드 받았다고 나온다. 기능이 하나도 없는데 2.1MB이나 된다? 그건 리액트가 기능의 편의성을 위해서 추가해놓은것들 때문이다. create-react-app의 개발환경의 파일의 무게는 무겁다. 여러 보안적인 문제도 그렇고 개발자가 아닌 사람들이 2.1MB를 쓰게 할수는 없다. npm run build 명령어로 빌드를 해보면 디렉토리 구조에서 이전에는 없었던 빌드파일이 생긴다. 저 폴더에 있는 index.html 파일을 보니 읽기 불편할 정도로 띄어쓰기가 안되어있다. 그 이유는 공백과 같이 불필요한 정보의 용량을 싹 날린거다. 그래서 용량이 훨씬 작다. 이렇게 create-react-ap.. 2020. 7. 26.
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.

티스토리툴바