REACT5 강의 내용 정리 (기초) 기초 파트 들으면서 정리해놨던 것들! 1. React를 사용하는 이유 Single Page Application 만들 때 사용 -> 새로고침 없이 부드럽게 페이지 이동 html 재사용 편리 같은 문법으로 앱 개발 가능 2. React 레이아웃 만들 때 쓰는 JSX 문법 3 html에 class 넣을 땐 className (class는 js의 예약어) html에서 변수를 사용할 때는 {} 중괄호 (데이터 바인딩) html에 style 속성 넣을 때는 style={{color:'blue', fontSize:'30px'}} 3. useState 중요한 데이터는 변수 말고 state에 (자료를 잠깐 저장할 때에는 변수) 변수가 있는데 굳이 state를 쓰는 이유 -> 값이 바뀌면 html이 자동으로 재랜더링 됨.. 2022. 11. 18. React에서 레이아웃 만들 때 쓰는 JSX 문법 3가지 JSX란? -> JS에서 HTML 태그를 쉽게 사용할 수 있도록 해주는 것. CSS도 똑같이 .css 파일에서 사용 가능 1. html에 class 넣을 때에는 className JSX가 아니라면 React.createElement('div', null) 이런 식으로 써야 함 html과 사용 방식은 같지만 class는 자바스크립트의 예약어이기 때문에 className=""을 사용해야 함 2. 변수를 html 내부에서 사용할 때에는 { } 중괄호로 데이터 바인딩 function App(){ let post = '강남 우동 맛집'; return ( 블로그임 { post } // 데이터 바인딩 ) } 이렇게 하면 div 안에 강남 우동 맛집이 담김 JSX를 사용하지 않는다면 document.getElement.. 2022. 11. 8. React를 사용하는 이유 노션에 정리해놓은거 블로그에 업로드 시작! 1. Single Page Application 만들 때 씀 -> 새로고침 없이 부드럽게 페이지 이동, 부드럽게 동작 2. html 재사용 편리 3. 같은 문법으로 앱 개발 가능 2022. 11. 8. React Challenge Day 1 | STYLED COMPONENTS #2.1 styled components creact-react-app, styled component 설치 및 셋팅 npx create-react-app react-challenge 기존 css로 작성한 것과 style component로 작성한 코드의 차이 경험 styled-component는 각각 컴포넌트로 만들어서 사용함 코드가 간결하고 재활용에 용이, 가독성 좋음 ` ` 백틱 사용 #2.2 Adapting and Extending 중복되는 값을 제거하고 컴포넌트를 설정 변경 가능한 형태로 만들기 컴포넌트 확장 // 변경 전 const BoxOne = styled.div` background-color: teal; width: 100px; height: 100px; `; const BoxTwo =.. 2022. 1. 24. 이전 1 2 다음