on your mark

styled-components 컴포넌트가 많은 경우 css 스타일링 하기 어려운 점이 있다. 컴포넌트 제작 시 스타일을 바로 입혀서 컴포넌트를 만들 수 있는데, (styled-components)를 이용하면 된다. import React, { useState } from 'react'; import styled from 'styled-components'; //padding이 20px인 div를 만들자 let Box = styled.div` padding : 20px; `; function Detail(){ return ( ) } props로 스타일링도 가능하다. let title = styled.h4` font-size: 25px; color: ${props => props.colors} `; .....

리액트 기초1 react bootstrap에서 react전용 bootstrap 사용가능하다. 그 외 다른 css프레임워크도 많으니 필요하면 찾아보는 걸 추천한다. Import & export export default 문법 (data.js) var name = 'Kim'; var name2 = 'Park'; export default name; //여러개의 변수를 내보내고 싶다면 //export {name, name2}; App.js와 별개로 data.js 파일을 생성한다. 이 파일에서 중요한 변수를 export하고 싶을 땐 export default 변수명 으로 사용 가능하다. 변수명, 함수명, 자료형 전부 배출 가능하다. 파일마다 export default 라는 키워드는 하나만 사용가능하다. expo..

Component component 들어가기 앞서 return 안에는 2개의 html 태그를 나란히 적을 수 없다. 하나의로 감싸거나 로 감싸자 function App(){ return( ) }Component 만들기 긴 HTML은 함수화 할 수 있다. function App(){ return( ) } function Comp(){ return( ... ) }component를 만들 때 유의할 점 component안에 component를 만들지 않는다. (App도 하나의 컴포넌트) 로 사용해도 되고 로 사용해도 됨 arrow function 사용 가능 function Comp(){ return (...) } let Comp = () => { return (...) } Component는 언제 쓸까 사이트..

리액트 입문 인강들으면서 필요한 부분 및 복습하고자 하는 부분만 작성한 것이기에 전체 내용을 알고 싶으면 인강 수강 권장 최대한 쉬운 표현을 사용하려고 한다. 리액트 입문 독학하면서 느낀 점 인강 수강하면 훨씬 이해가 빠르다. 리액트 가이드문서 읽으면 좋긴한데, 구버전이라 초보는 참고하기 어려울 수 있다. 인강 수강하고-> To do app 등 기초 앱 제작을 따라하는 것도 좋다. 개인 프로젝트 아무거나 하면서 체득하자 기타 참고 자료는 업데이트 할 예정 개발환경 setting download plz nodejs vsc 시작하기 작업용 폴더 생성 후 해당 폴더에 npx create-react-app [프로젝트명] 으로 프로젝트 생성해준다. vsc 에서 file-open folder 후 [프로젝트명] 폴더..