솔적솔적

안녕하세요, 오늘은 지금까지 배웠던 리액트를 기반으로 프로젝트를 하나 개인 연습으로 생성하여 프로토타입을 기반으로 홈페이지 구조와 기능들을 만들어 보려고합니다. 자, 차근히 진행하도록 하겠습니다. ​ 1. 프로젝트 생성 새로운 파일하나를 만들고 1) Ctrl + shift + ` 를 눌러 npx create-react-app test(원하는 파일명으로 설치) 2) npm 대신에 쓸 수 있는 소프트웨어, yarn 을 구글에 검색 yarn https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com 노란 현광색으로 표시된..

안녕하세요. 저번 시간에 모달을 만들면서 Component의 장점을 배웠습니다요. Conponent를 만들면 한 묶음씩만든 것을 볼 수 있어 전보다 눈이 편하고 관리가 용이하다는 것, 그럼 단점은? → Component의 단점은, state를 바로 받아 사용할 수 없다는 것. 전에 만들었던 '아범'변수를 방금 만든 아범모달안에 데이터바인딩 할 수 있을까? 없다. 예) 아범은 변수x를 함수1()에다 선언을 한 것이므로 함수2() 안에 바로 데이터바인딩을 할 수 없다. 불러오고싶다면? 데이터를 전해주는 방법이 있다. 그것은 props. 원한다면 함수1()안에 선언된 변수의 데이터를 함수2()에게 넘겨줄 수 있다. ​ APP 컴포넌트 안에 있는 이라는 컴포넌트를 만들었는데(저번시간 코드내용으로 그대로 진행),..

안녕하세요, 오늘은 Component문법을 사용하여 모달창을 만드는 방법을 알아가봅시다. ​ 1. 모달창 만들기 1. 작성한 글 바로 밑에 로 하나의 영역을 만들기 2. 안에 작성할 내용 넣기 3. App.css 디자인 근데, 이 모달을 한 번만 하진 않을텐데 계속 div를 만들면 헷갈리고 복잡하지 않을까? 그래서 리액트에서는 그 문제를 간편하게 만들 수 있는 방법, HTML를 한 단어로 축약할 수 있는 Component문법을 방법을 사용한다. 내가 정하고 싶은 단어로 정해서 한 줄로 넣어놓을 수 있다. 아범은 Model이라고 했지만 명을 어떻게 지어도 무관하다는 것. ​ 4. function APP의 return 부분 괄호까지 끝나는 부분쯤에 Component를 만든다. 이것이 컴포넌트 문법이다. 1...

안녕하세요, 이번에는 쇼핑몰이나 인스타그램에서 자주 보이는 좋아요 버튼을 만들어 볼 예정이예요. 클릭하면 숫자가 증가하는 버튼을 만들려하는데, 리액트로는 어떻게 만들어질까요? 차근히~ 알아가보죠! ​ (저번시간에 만든 App.js 파일 그대로 사용합니다.) 먼저 화면상에 클릭버튼 만들기. (아범은 누르는 버튼을 이모티콘으로 가져왔습니다.) 1. 클릭 시 숫자 증가하는 버튼 만들기 이 태크안에 클릭 이벤트를 넣어주고 클릭 시 실행될 함수를 넣어줘야한다. onClick={ 클릭될 때 실행할 함수 } ⇒ onClick={ ()⇒{실행할 내용} } ​ 그럼 처음 초기값은 0으로 셋팅을 하고 클릭 시 숫자가 변하는 방법을 써야한다. state를 이용해 변경을 하는 것이다. 이렇게 기존에 선언한 '좋아' 변수를 클..