코딩공부/React(29)
-
코딩앙마 React JS CSS 작성법
CSS 작성은 여러가지가 있는데, create-react-app으로 만든 프로젝트에는 별도 전용 패키지 설치 없이 바로 사용할 수 있는 방법 세가지가 있다. 1. 인라인 스타일 사용 CSS 파일을 사용할 필요 없이 HTML에 바로 적어주는 것. 여기서 스타일은 객체로 작성해야한다. Hello //중괄호 안에 중괄호 한번 더! 하지만 보통 특별한 경우가 아니면 인라인으로 CSS를 적는 일은 드물다. 2. index.css 파일 활용하기 전체 스타일링에 영향을 미치는 파일 app.css는 앱 컴포넌트에 한정된 내용들이 들어가있을 것만 같지만, 사실 app.css는 앱 컴포넌트에만 적용되는 것이 아니다. app.css와 컴포넌트 자체 css에 따로 속성을 주어도 header에서 하나로 합쳐지기때문이다. 그래서..
2022.01.22 -
코딩앙마 React JS 컴포넌트, JSX
REACT로 만든 페이지는 컴포넌트로 구성되어있다. 페이지단위로 HTML을 작성하는 것이아니라 각 부분을 컴포넌트로 만들어서 조립하는것. 장점 : 비슷한 부분들은 코드를 재사용할 수 있고, 유지보수도 쉬워진다. e.g) 네이버의 제목 컴포넌트, 로그인 컴포넌트, 언론사 컴포넌트.... 모든 컴포넌트는 맨 앞글자를 대문자로 한다. 함수형 컴포넌트에서 리턴하는 것을 JSX라고 한다. 생긴것은 html과 비슷하다. class는 리액트에서는 예약어이기 때문에 class 이름을 지정할때는 className을 쓴다. css style은 객체로 전달해줘야 쓸 수 있다. function App() { const name = "가현"; return ( Welcome, {name}! // {}로 변수를 가져올 수 있다 {..
2022.01.22 -
코딩앙마 React JS crate-react-app
리엑트 프로젝트 create 하는 법 C:\Users\gahyu\OneDrive\바탕 화면\sparta\React>npx create-react-app voca(프로젝트명) 페이지 여는법 (프로젝트 경로에서) npm start 구성 살펴보기 node_modules 폴더 삭제하면 작동안됨 그래도 package.json 파일만 그대로라면 npm install 명령어로 다시 설치할 수 있기때문에 git에 업로드 할 때는 크기가 큰 node_modules 파일은 빼고 업로드해준다. public 폴더 index.html이 존재한다 여기서 리액트 코드로 실행되어서 만들어진 DOM이 구현된다 src 폴더 대부분에 작업은 이 안에서 진행된다 app.js에서 기능을 구현한다. 기능을 구현하고 저장하면 바로 반영이 되는데..
2022.01.22 -
리액트 기초반 1주차(2)
JavaScript Array 내장함수 - map 배열에 속한 항목을 변환할 때 사용 어떤 배열에 속한 항목을 원하는 대로 변환하고, 변환한 값을 새로운 배열로 만들어줌 콜백함수를 배열의 길이만큼 반복해줌 원본 배열은 변하지 않는다. const array_num = [0, 1, 2, 3, 4, 5]; // 파라미터는 배열의 요소들(하나하나 들어옴) const new_array = array_num.map((array_item) =>{ return array_item + 1; // 요소요소들에 +1을 해줌 }); // 새 배열의 값은 원본 배열 원소에 +1 한 값입니다. console.log(new_array); // 원본 배열은 그대로 있죠! console.log(array_num); for문 -> ma..
2022.01.22 -
리액트 기초반 1주차(1)
** vscode 정렬 alt + shift + f DOM - 문서 객체 모델, html 단위 하나하나를 객체로 생각하는 모델. 트리구조라는 뜻! - dom tree는 콘솔에서 확인 할 수 있다 - MDN문서: https://developer.mozilla.org/ko/docs/Web/API/Document Document - Web API | MDN Document 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠(DOM 트리)의 진입점 역할을 수행합니다. developer.mozilla.org CSS 그리드 시스템 display: block; 넓이가 가로하나를 꽉 채우는 default 속성 display: flex; 영역을 유동적으로 바꿔주는 것. content의 실제 넓이 만큼만 ..
2022.01.22