반응형 React11 React 프로젝트 npx create-app-react 사용하는 이유 그냥 html에 하나하나 리액트 설정해도 되는데 이렇게 그냥하게되면 너무 시간이 오래걸려서 코딩을 포기하는 상황이 생기기때문에 Create React App 이라는 라이브러리를 사용하는게 일반적임 이건 구글에서 찾아보면 되고요 이거 쓰러면 npm 이라는게 필요한데 그냥 Nodejs 설치하면 딸려오는거고 npm이 설치가 잘 됐다하면 npx 같은 명령어도 사용 할 수가 있어서 npx create-react-app 요런걸로 프로젝트 생성 할 수 있는거임 이렇게 프로젝트를 생성하고 나면 아래 같은 폴더구조를 만나게 되는데 설명 좀 해드리겠음 node_modules React 프로젝트를하면서 모든 라이브러리들을 모아두는 곳임 public html, image 파일 같은 static 파일 모아두는 곳임 src 내가.. 2022. 6. 9. React 를 설치 해보자. 개발환경 구축 개쉽다 구글에서 nodejs 검색해서 첫 번째 뜨는 사이트 들어가면 돔 그리고 아래 화면처럼 왼쪽꺼 다운로드 후 설치 ㄱㄱ 두번째로 에디트 툴인 vscode 를 설치 ! 구글에서 vscode 검색 후 첫번째 뜨는 사이트에서 ㄱㄱ 그러면 이제 바로 이어서 프로젝트 생성까지 쭈욱해보자 바탕화면 등등에 폴더 하나만 들쟈 나는 reactdalin 으로 하나 만들었음 그리고 쉬프트+마우스오른쪽 클릭하면 밑에처럼 나오는데 PowerShell 창열기 누르쟈 그렇게 하면 나오는 파워쉘 창에서 npx create-react-app blog 입력 ! 그러면 리액트 프로젝트가 설치 됨 위에처럼 Success ! ~~~~ 하는 텍스트뜨면 다된거임 굳 개쉽지요 ? 아직끝난거 아니고 좀 더 알려드림 이렇게 프로젝트 생성하고나면 이제 r.. 2022. 6. 8. React 디버깅 툴 - React developer tools React 디버깅 툴 중에 요런게 있다. 크롬 확장프로그램으로 설치 해놓으면 굉장히 편함 설치 해놓으면 브라우저 오른쪽 상단과 같이 리엑트로 만든 사이트면 저렇게 표시가뜸 더 멋있는건 개발자모드에서 나오는 Components 기능인데 이렇게 사이트의 컴포넌트가 어떻게 생겨먹었는지 파악 가능함 그리고 또 하나의 기능은 설정에서 [ Highlight updates when components render. ] 를 체크 해주면, 사이트가 업데이트가 될 때 어떤 것들이 랜더링되는지 알수있음. 2022. 2. 15. React Hook을 아십니까 - state 쓰기 React Hook 에서 state를 정말 쉽게 사용 할 수 있음 useState() API 이용하면 됨 // 기존 함수형 Component state = { count: 0; }; // React Hook - 변수를 선언하면서 두가지를 선언해야함, count와 count를 업데이트 할 수있는 setCount const [count, setCount] = useState(0) useState를 사용하면 두가지( 실제 state 값 , 업데이트 할 수 있는 set함수 )를 리턴 해줌 2022. 2. 10. 이전 1 2 3 다음 반응형
