공부모음 (10) 썸네일형 리스트형 리액트 프로젝트 시작 components 가 porps를 모아 놓는 곳 containers 가 state를 모아 놓는 곳 pages 웹 페이지를 모아 놓는 곳 assets 이미지랑 색깔 관련 모아 놓는 곳 library 계속 반복되는 함수가 많이 있는데 그것을 모아 놓는 곳 . 은 내 폴더라는 의미 컴포넌트가 없으면 index.js로 만든다 불러올 때, 초기 설정만 해놓으면 되게 편하다. @emotion/core 리액트용 css library이다. "dependencies" 에서 내가 받은 파일 목록을 볼 수 있다. sass에서 & { } 이것의 자기 선택자(class)를 뜻한다. & { } 안에서 값 설정한거 하나하나 따로 스타일링 가능하다. 우리가 만든 것은 속성 : 값도 마음대로 설정 가능 App이 최상위고 그 안에 B.. 나의 첫번째 리액트 컴포넌트 React를 설치하고 나서, 이제 VScode를 통해서 실행시켜준다. cd 내 파일경로명, yarn start로 서버를 가동시켜준다. 그러면 동글동글 돌아가는 리액트가 나온다. 이건 개발자가 만들어 준 거기 때문에 이제 나의 컴포넌트를 새로 만들어보자 바벨이란 도구를 사용해서 JSX문법이 JS로 전환이 된다. import와 expoert 로 주고 내보내기가 가능하다. JSX에서 주석을 사용하는 경우에는 /* */ 기존처럼 주석을 사용할 수 있지만, 여기에 { } 중괄호로 한번 더 감싸주어야만 화면에 출력되지 않고, 제대로 된 주석이 작성이 가능하다. 또한 // 셀프클로징 주석도 사용이 가능하다. JSX에서 지켜져야 할 규칙 태그는 꼭 닫혀야 한다! or 이런식으로 해줘야만 에러가 발생하지 않는다. 이전 1 2 다음