개발새발개발/React

오늘할 것 :상세페이지 영역 만들기   Componentdiv가 많아지면 지저분해짐이를 개선하기 위해 component를 사용함App()도 사실은 컴포넌트임  Component 만드는 방법1function 생성function App(){} 밖에 만들어야 함함수명은 영어 대문자로 시작return() 안에 html 축약할 담기 쓰기  컴포넌트를 사용하면 좋은 상황반복적인 html 축약할 때큰 페이지로 전환할 때자주 변경되는 UI  컴포넌트 사용 시 주의사항state 가져올 때 주의state는 다른 함수에서 저장되어 있기 때문에 데이터바인딩이 안됨  컴포넌트 만드는 법2(참고)function 함수 밖에 변수 선언  let Modal = () => { return( ) }   참고1굳이 하나의..

참고terminal 창에서 warning message 삭제하는 법/*eslint-disable*/ 오늘 할 것 :좋아요버튼과 좋아요 개수 UI 만들기  좋아요 버튼 만들기onClick Eventhandler클릭했을 때 {} 안의 함수가 실행됨사용법onClick={funcName} 후 funciotn 정의onClick={function() {console.log(1)}}onClick={() => {console.log(1)}}{} 안에는 함수가 들어가야 함 좋아요 개수 UI 만들기State 변경state는 등호로 변경 금지(html에 반영 안됨)useState()에서 변수 선언할 때 두번째 파라미터를 이용해 수정해야 함ex) let [like, likeController ] = useState(0)변경하..

코딩애플님의 2022 리액트 강의 2~6강을 참고해서 React로 간단한 홈페이지 만들기를 해보았다! 무료강의가 6강까지만 있어서 완성도 있는 홈페이지는 안나왔지만,React 입문 느낌으로 해보기 좋았다 이 글 이후부터는 "리액트를 다루는 기술" 책을 바탕으로 공부할 계획이다!  JSX 문법기본 셋팅App.js에서 div 하나만 남기고 지우기 JSX 문법class 넣을 땐 className으로 해야함class 선언과 혼동될 수 있기 때문변수 넣을 땐 {중괄호} : 데이터 바인딩태그 사이 뿐만 아니라 태그 안에도 사용 가능(ex)style 넣을 땐 style={{스타일명:'값'}}카멜케이스로 작성(font-size(X), fontSize(O)) 참고error message는 팝업으로 뜨기도 하고, cons..

VS code에서 React를 하려고 할 때, 자동 완성 태그가 안됐다구글에 검색해보니 다행히 나와 같은 고충을 겪는 분들이 많아보였다2가지 방법인데 원리는 같고, 1번째 방법이 안되면 2번째로 해보면 될 것 같다  첫번째 방법  1. 왼쪽 상단 [파일] - [기본설정] - [설정] 또는 `Ctrl +`        2. include Languages 검색 후 [항목추가]항목 : javascript  / 값 : javascriptreact        일반적인 경우 위의 방법으로 추가가 가능하지만,   나의 경우 django를 미리 설정해둔 것 때문에VSCode 자체 설정 오류로 항목추가에서 에러가 발생했다   그래서 직접 settings.json으로 가서 수정하니 잘 됐다! (아래 2번째 방법)   ..

React 공부를 위해 호기롭게 시작했으나설치에서부터 난관에 부딪혔다..!  이번 글에서는 React 설치 방법과 에러 발생 시 해결 방법에 대해 작성하겠습니다에러 해결 방법이 궁금하신 분들은 글 하단으로 가시면 됩니다.   React 설치 및 프로젝트 생성 방법 개발 환경 셋팅1. nodejs 검색해서 설치2. vscode 에디터 검색해서 설치3. yarn 설치 (`npm install --global yarn')4. git 설치 프로젝트 생성youtube cordingapple 1. 작업용 폴더 만들기  2. Shift+우클릭 - PowerShell/터미널 열기  3. 터미널 창에 `npx create-react-app 프로젝트명` 입력  4. 만약 허가되지 않은 스크립트 어쩌구 에러가 뜬다면  5...