솔적솔적

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

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

저번시간에는 리액트에 대한 간단한 셋팅과 리액트를 쓰면 좋은 점들에 대해서 알아보았고, 이번 시간에는 리액트에서 데이터바인딩을 하는 법과 navbar를 만드는 법, 변수를 선언할 때 state로 데이터를 저장하는 방법에 대해서 알아보겠습니다. 그리고 혹시 보고 계신 분들 중에 🎲보드게임🎲이나 프로젝트📂에 관심있으신 분들 계신가요? 사이드프로젝트팀과 보드게임 중고거래 플랫폼을 진행하고 있는데, 기획부터 개발과정까지 오픈, IT관련 정보를 공유하자는 목적으로 팀과 함께 네이버 블로깅도 운영하고 있습니다. 관심있으신 분들이 있으시다면 살짝쿵 방문해주시면 감사하겠습니다. https://blog.naver.com/boardgetddo_team 보드살롱 : 네이버 블로그 즐겁고 유쾌한 기획자, 개발자, 디자이너, ..

안녕하세요, 리액트 셋팅부터 홈페이지를 만들 때 사용하는 기능등을 알아가려해요. 요즘은 리액트가 대세라고 곳곳에서 리액트를 쓰고있다고 합니다. 다들 리액트를 배우려는 이유는 Web app을 만들기 위해서! web app이 뭔데? Instagram, Vibe 이런 사이트들 우리가 다 사용! 이걸 web app이라고 하며. 이 web app을 사용하면 포스팅을발행하거나 다른 페이지로 넘어갈 때 새로고침을 굳이 안해도 자연스럽게 요청한 화면이 나오게 됩니다. web app을 사용하는 이유를 말해보자면 1. HTML 관리가 보다 편리, 2. 전환율 높음, 3. 리액트 문법으로 IOS/Android 모바일 앱제작도 가능, 4. 자바스크립트를 쓰지만 리액트를 쓴다면 더 간결명료한 코드로 구현가능, 5. 가독성이 좋..