태그 유저의 입력을 받을 수 있는 박스를 생성하고 싶으면 html에서는 아래와 같이 태그를 생성합니다. 태그 이벤트 유저가 에 뭔가 입력시 코드를 실행해주고 싶을 때가 많습니다. 그러고 싶으면 onChange 아니면 onInput 이벤트핸들러를 부착하면 됩니다. { 실행할코드 }}/> onChange, onInput은 input에 사용자가 입력하면 안에 있는 코드를 실행해줍니다. 확인해보겠습니다. 아래와 같이 코드를 작성해보고 확인해보면 { console.log('확인'); }}> 아래와 같이 입력할때마다 이벤트가 실행됩니다. 에 입력한 값 가져오기 e라는 파라미터를 추가해주고 e.target.value라고 적으면 현재 input에 입력된 값을 가져올 수 있습니다. 이벤트핸들러에 e를 추가하면 e는 이벤..
자식컴포넌트에서 부모컴포넌트에 있던 state를 쓰고 싶으면 그냥 사용하면 안되고 props로 전송해서 써야합니다. 다음과 같은 코드를 봅시다. 아래의 코드에서 처럼 실행하면 실행되지 않습니다. 왜냐하면 글제목이라는 state 변수는 function App()에 있지 function Modal()에 없기 때문입니다. function App (){ let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( ) } function Modal(){ return ( { 글제목[0] } 날짜 상세내용 ) } 하지만 아래처럼 컴포넌트 2개가 부모/자식인 경우에는 가능합니다. 부모 컴포넌트의 state를 자식 컴포넌트로 전송해줄 수 있습니다. 그러면..
똑같은 html이 반복적으로 출현하면 반복문을 이용해서 쉽게 똑같은 html을 생성할 수 도 있습니다. for반복문은 JSX중괄호 안에서 사용할 수 없어서 map()을 대신 사용합니다. map 함수 사용법 모든 array 자료 우측엔 map()함수를 붙일 수 있습니다. var array = [2,3,4]; array.map(function(){ console.log(1) }); 위의 코드처럼 작성하면 array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행해줍니다. 아래처럼 콜백함수에 파라미터 아무렇게나 작성해주면 그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해줍니다. 즉 2, 3, 4 가 출력됩니다. var array = [2,3,4]; array.map(function(a){ con..
동적인 UI 만드는 step html css로 미리 디자인 완성 UI의 현재 상태를 state로 저장 state에 따라 UI가 어떻게 보일지 작성 동적인 UI가 뭐냐면 유저가 조작시 형태가 바뀌는 모달창 탭 서브메뉴 툴팁 경고문 등 그런 UI들을 의미합니다. 저는 글제목 누르면 전에 만들었던 이게 등장하는 모달창 기능을 만들어보겠습니다. 1. html css로 미리 디자인해놓기 저번시간에 modal 컴포넌트에 디자인을 했습니다. 2. UI의 현재상태를 state로 저장 state를 하나 만들고 거기에 현재 UI의 상태정보를 저장해보겠습니다. let [modal, setModal] = useState(false); 보통 위 코드처럼 state변경함수는 set을 앞에 붙이는게 관습입니다. 모달창의 열림/닫힘..
모달창 UI 상세페이지 겸 모달창 UI를 하나 만들어보겠습니다. 일단 html과 css는 다음과 같습니다. 제목 날짜 상세내용 .modal{ margin-top : 20px; padding : 20px; background : #eee; text-align : left; } 위의 html코드를 작성할 때 유의할 점이 있습니다. return()안에는 두개의 html태그를 나란히 적기가 안됩니다. return()내부는 하나의 태그로 시작해서 하나의 태그로 끝나야합니다. (의미없는 div 쓰기 싫으면 로 감싸도됩니다. 이걸 fragment문법이라고 합니다) Component문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. 바로 Component입니다. 이걸 이용하면 함..
array, object 자료일 경우에 state 수정할 때의 주의해야 할 점에 대해 알아봅시다. 글수정 버튼 지난시간에 코드에서 아래코드를 추가하여 클릭을하면 state를 변경해주는 버튼을 만들었습니다. function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( { 글제목변경(['여자코트 추천', '강남 우동맛집', '파이썬 독학']) } }> 수정버튼 ) } 하지만 위의코드는 별로 좋지 않습니다. 만약 []안에 글이 100개가 있으면 onClick안의 코드도 매우 길어지게 됩니다. 그래서 state를 첫 글만 바꿔서 state변경함수에 집어넣는 식으로 바꿔보겠습니다. function App(){ le..
좋아요 버튼 만들기 현재 아래의 페이지에서 각 게시물의 좋아요 버튼을 만들고 버튼을 누르면 갯수가 1씩 증가하는 기능을 만들어보겠습니다. 글제목 옆에 span태그를 활용해 좋아요를 만들어줍니다. { 글제목[0] } 👍 0 지금은 0이라고 하드코딩했는데 이렇게 하면 안될거 같습니다. 저번시간에 "자주바뀔거 같은 html 내용은 state로 저장했다가 데이터바인딩하세요"라고 배웠습니다. 따라서 state로 만들어보겠습니다. function App(){ let [따봉] = useState(0); return ( { 글제목[0] } 👍 { 따봉 } ) } onClick사용법 이제 버튼을 누르면 따봉이라는 state를 1증가시키면 원하던 기능완성입니다. 기존에 html에서는 아래처럼 코드를 실행해야 했습니다. J..
state만드는 법 기존에는 let posts = '값' 이렇게 변수에 데이터를 저장했었는데 리액트에선 변수 말고 state를 만들어서 데이터를 저장 할 수 있습니다. function App(){ let [a,b] = useState('남자 코트 추천'); let posts = '강남 우동 맛집'; return ( 개발 blog 글제목 2월 17일 발행 ) } 맨 윗줄에 import{useState} from 'react'하고 원하는 곳에서 useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있습니다. 그리고 저장한 자료를 나중에 쓰고 싶으면 let[a,b] = useState('남자 코트 추천'); a자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 됩니다...
기존의 html,css,js로 웹사이트를 만들때에는 html에 코드를 작성했었는데 React에는 html 대신 JSX라는걸 사용합니다. App.js가 우리가 작성할 메인페이지입니다. 이미 채워져있던 부분들은 없애고 하나만 남겨놓고 시작합니다. 우리는 블로그를 만드는 것을 목표로 삼았기 때문에 먼저 블로그 상단 nav를 제작해봅시다. JSX문법1 HTML에 class 넣을 땐 className 아래처럼 h1~h4태그를 사용하거나 p태그를 사용하여 내용을 삽입할 수 있습니다. 그리고 기존의 html에서는 css를 설정할때 class=이름 형식으로 설정했는데 React에서는 className=이름 형식으로 설정해줘야합니다. 설정 후 App.css파일로가서 css를 설정할 수 있습니다. 왜냐하면 실은 App.j..
React 왜 쓸까? 리액트 문법부터 들이밀면 누구나 이해가 가지 않습니다. 리액트의 정확한 용도를 알아야 리액트라는 라이브러리를 이해할 수 있는데 Instagram과 같은 웹사이트에 들어가 보면 페이지 전환 같은게 새로고침 없이 부드럽게 동작합니다. 이런 사이트들을 Single Page Application 이라고 하는데 html 파일을 1개만 쓰고 다른 페이지를 보여주고 싶을 때 html 부분만 갈아치워서 보여줍니다. 그래서 부드럽게 동작합니다. JavaScript만으로도 만들 수는 있지만 코드가 너무 길어지고 복잡해지는 관계로 리액트(React)라는 자바스크립트 라이브러러리를 설치해서 사용하면 쉽게 만들 수 있습니다. 그래서 리액트라는 라이브러리를 배우고 사용하는 것입니다. 리액트를 쓰는 또 다른 ..
모달창이란? 화면을 개발할 때 자주 나오는 구성 요소 중 하나가 모달(Modal)창입니다. 팝업(Popup)창과 약간 혼동해서 쓰는 경향이 있는데 Modal 과 Popup는 개념이 다릅니다, 팝업(Popup)은 현재 화면에 다른 화면을 하나의창(Browser)으로 보여주는 기능이고, 모달(Modal)은 화면 위에 하나의 작은 화면을 더 만들어 부가적인 일들을 처리할 수 있게 만드는 기능입니다. 먼저 html의 body에 아래와 같이 작성해줍니다. modal창을 위한 div영역, modal창을 열고닫아줄 button을 하나 만들어줍니다. 모달창 제목 모달창 내용 Modal열기 다음으로 CSS를 작성해줍니다. 그 중에서도 먼저 .mdal을 통해 모달 창 배경화면을 덮는 스타일을 정의합니다. 즉 아래의 사진처..
미니 프로젝트 세번째 게임으로 "틀린글자찾기"에서 변형한 다른색깔찾기를 만들어보겠습니다. 게임설명 여러개의 색 중 다른 색을 찾는 게임입니다. 사용기술 html, css, javascript 게임 기능 다른 색깔 찾기 사용자는 주어진 시간 내에 다른 색을 찾아야 한다. 사용자에게는 제한된 시간(15초)이 주어진다. 색상이 2*2 -> 3*3 -> 4*4 -> 5*5 -> 6*6 순으로 나타난다. 정답을 선택한 경우 다음스테이지로 넘어간다. 오답을 클릭한 경우 처음부터 다시 시작한다. 게임종료후 결과 출력 게임은 제한된 시간이 0초가 되었을 때 종료된다. 게임 종료 시 사용자가 도달한 스테이지 정보를 출력한다. 1. 색상 1.1 색상요소생성 색깔을 생성하기 위해 js코드에서 html코드의 색깔이들어갈 영역..
저번시간의 가위바위보게임에 이어 이번에는 1인 토이프로젝트로 틀린글자찾기라는 게임을 만들어보았습니다. (https://myeongsu0257.tistory.com/143) Javascript - 미니게임 프로젝트(가위바위보) Javascript를 이용해 간단한 여러 프로젝트를 해볼려고합니다. 아직 실력이 미흡해서 프로젝트의 퀄리티가 부족할 수 있습니다. 이점 참고해주세요! 게임설명 컴퓨터와 가위바위보 할 수 있습니다 myeongsu0257.tistory.com 먼저 만든화면입니다. 아직 css 부분은 많이 공부하지 않았기도하고 이번 프로젝트의 목표가 js에 익숙해질려고 진행하였기 때문에 디자인은 별로 좋지않습니다. 이후에 js에 익숙해지고 css를 공부하여 다시 한번 더 프로젝트를 꾸밀 생각입니다! 게임..
Javascript를 이용해 간단한 여러 프로젝트를 해볼려고합니다. 아직 실력이 미흡해서 프로젝트의 퀄리티가 부족할 수 있습니다. 이점 참고해주세요! 게임설명 컴퓨터와 가위바위보 할 수 있습니다. 기능 컴퓨터와 가위바위보 대결 컴퓨터는 가위, 바위, 보 중 랜덤으로 하나를 선택한다. 사용자는 가위, 바위, 보 중 하나를 선택할 수 있다. 사용자가 하나를 선택하는 순간 컴퓨터가 선택한 값과 비교하여 결과를 출력한다. HTML html 코드는 간단하게 작성했습니다. 사용자 점수 : 0 컴퓨터 점수 : 0 CSS css는 flex를 이용하여 구현하였습니다. 모든 요소들을 가운데 정렬을 해주었고 버튼의 디자인을 간단하게 수정해주었습니다. body{ font-family: 'Lato', sans-serif; } ..
북마크리스트표시 이번에는 저번에 이어 북마크 바에 여러 아이템을 추가해보고 추가한 아이템 리스트들을 표시하는 기능까지 개발해보겠습니다. 먼저 html에서 class이름이 bookmark-bar인 요소 안에 class이름과 id값이 bookmark-item-add-btn인 div를 작성하고, 그 아래에는 새로운 북마크를 추가할 수 있는 입력폼과 추가버튼을 만들어주겠습니다. + 북마크 추가 이름 주소 취소 추가 그 다음, bookmark.js 파일을 만들어서 방금만든 최상위 div를 id를 통해 불러오겠습니다. 이 북마크도 마찬가지로, 한 번 추가한 북마크는 다음에 접속했을 때 추가된 상태여야 하기 때문에 로컬스토리지에 저장해야합니다. 배열을 하나 만들고, 만약 로컬스토리지에 이 배열의 값이 있으면 로컬스토..
