인간이 되고 싶은 원숭이

저는 이런 스텝으로 개발을 진행해보았습니다. 1. 일단 사용자가 input에 뭔가 입력하면 입력한 값을 변수나 state로 저장부터 할 것입니다. (중요한 데이터는 일단 저장해두는게 좋으니까요) 2. 버튼을 누르면 그 state를 [글제목이라는 state] 어레이의 뒤에 하나 뿅 추가할 것입니다. 이게 끝입니다. 그러면 알아서 글이 4개 보일 것입니다. 왜 4개가 알아서 보이냐고요? state 변경하면 HTML도 알아서 재렌더링 되니까요. 그러니 div를 하나 더 만들어주세요~ 이런 코드는 필요가 없습니다. state만 변경하면 됩니다. 1. 사용자가 input에 뭔가 입력하면 입력한 값을 변수나 state로 저장하려면 기억이 안난다면 바로 저번 시간 input 다루기 강의를 참고하시면 되겠군요. fun..

실제 사이트엔 이런 것들이 매우 많습니다. 여기에 입력된 값을 저장하거나 어디로 보내거나 그래야할 경우가 많은데 리액트에서 input 데이터는 어떻게 처리하는지 알아봅시다. 실은 쌩 자바스크립트 문법이랑 똑같습니다. 그리고 map 반복문 쓰면 콘솔창에 warning 뜨는 것도 마지막 부분에서 해결해보도록 합시다. 사용자가 input에 입력한 데이터를 state로 저장하는 법 사용자가 input에 입력한 데이터는 역시나 중요한 데이터기 때문에 state 저장해서 쓰는게 일반적입니다. 저장부터하는 법을 알아봅시다. 저장하려면 일단 빈 state가 하나가 필요할테니 state를 하나 만들어봅시다. function App (){ let [입력값, 입력값변경] = useState(''); return ( HTML..

App이라는 컴포넌트안에 이라는 컴포넌트를 만들어보았습니다. (이걸 전문용어로 부모 자식관계라고 합니다. App은 부모 컴포넌트고 Modal은 자식 컴포넌트입니다.) 근데 자식 컴포넌트가 부모 컴포넌트 안에 있던 state를 갖다 쓰고싶을 때가 가끔 있습니다. 그럴 땐 대충 { 부모에 있던 state이름 } 이렇게 쓰시면 안되고 props라는 문법으로 state를 전송한 뒤에 { props.state이름 } 이렇게 쓰셔야합니다. 뭔소린지 알아봅시다. 에 실제 제목 데이터바인딩을 해봅시다 저번에 만든 내부의 제목에 실제 데이터를 집어넣고 싶으면 어떻게 하죠? 실제데이터는 글제목이라는 state변수가 있으니 그걸 그대로 집어넣으면 되지 않을까요? 예를 들면 이렇게 하면 될 것 같지 않습니까 function ..

리액트환경에선 for 반복문을 이용해 HTML을 줄일 수도 있습니다. 그냥 반복문 적고 안에 HTML 담으시면 끝입니다. 하지만 JSX 코딩하던 중간중간에 for 반복문을 직접 쓸 수는 없고 특별한 방법이 좀 필요합니다. 함께 알아봅시다. 자바스크립트 map 함수 쓰는 법 JSX 중간중간 중괄호 열고 { 변수명 } 넣던거 기억나시죠? 그럼 반복문도 중괄호 안에서 { for (){} } 이렇게 집어넣을 수 있지않을까라고 생각할 수 있겠지만 {} 중괄호안에는 변수, 함수 이런 것만 입력가능합니다. 그래서 중괄호 안에서 쓸 수 있는 map 이라는 반복문을 이용합니다. 반복문은 아니고 array에 붙일 수 있는 일종의 내장함수인데 뭔지 자세히 알아봅시다. array 자료형이 하나 있다고 칩시다. array 안의..

클릭하면 등장하는 간단한 UI는 어떻게 만드는지 알아봅시다. 쌩 자바스크립트에선 display : block 이런 스타일을 조정해서 보여주고 안보여주고 했었는데 리액트에선 모달창이 현재 보이는지 안보이는지 state를 저장해둔 뒤에 if문을 사용해서 state에 따라 모달창을 보여줍니다. 글만 읽으면 뭔소리인지 이해가 안되니 밑에서 자세히 알아봅시다. 리액트에서 HTML UI를 조건에 따라 보여주고 싶으면 특정상황에 맞춰서 HTML을 보여주고 안보여주고 이런건 if문을 이용하시면 됩니다. 그럼 만약에 특정 조건이 참일 때만 을 보여주고 싶으면 어떻게 할까요? function App (){ return ( HTML 잔뜩있는 곳 { 1 < 3 ? : null } ) } ▲ 실은 리액트 중괄호 내에서 if문을..

복잡한 HTML들을 한 단어로 치환할 수 있는 Component 문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. Component라고 합니다. 이걸 이용하시면 함수 만들듯, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있습니다. 우리 방금 만든 모달창도 깔끔하게 한 단어로 치환해봅시다. 이렇게 따라합니다. function App (){ return ( HTML 잔뜩있는 곳 ... ) } function Modal(){ return ( 제목 날짜 상세내용 ) } ▲ 이렇게 하시면 원하는 HTML을 한 단어로 줄일 수 있습니다. 줄이는 법은 1. function을 이용해서 함수를 하나 만들어주시면 되고 2. 그 함수 안에 return..

글제목 옆에 따봉 갯수와 따봉 버튼을 만들어봅시다 따봉을 누르면 따봉 갯수가 1씩 증가하는 기능을 만들어볼겁니다. 하지만 기능은 좀 나중에 생각하고 일단 좋아요 버튼과 좋아요 갯수를 HTML로 표현해봅시다. 여러분의 App() 이라는 함수 안에 글제목 있죠? 이걸 하단과 같이 수정합니다. { 글제목[0] } ? 0 그럼 멋진 따봉 UI가 완성됩니다. 미리보기 띄워보면 보이시죠? 여기서 이제 따봉 갯수에 좀 주목을 해보도록 합시다. 지금은 0이라고 하드코딩 해놨는데, 이러면 안될 것 같습니다. 이걸 state 이런걸로 만들어놓아야 갯수가 변경이 될 때 스무스하게 HTML도 재렌더링이 일어나겠죠? 그러니 어서 빨리 따봉갯수 데이터를 state로 만든 후 HTML에 꽂아넣어보세요. (따봉갯수 데이터의 초기값은..

state를 만들어서 데이터를 저장해봅시다 리액트에선 변수 말고 state를 만들어서 데이터를 저장해서 쓸 수도 있습니다. 이전 강의에서는 그냥 let posts = '강남 어쩌구' 이렇게 일반 변수에 데이터를 저장했었는데 이번엔 state를 이용해 데이터를 저장해보도록 합시다. 변수쓰면 되는거지 왜 굳이 그러냐고요? 이유는 좀 있다가 알게 됩니다. 여러분의 App.js 파일에 다음과 같은 코드를 추가합니다. import React, { useState } from 'react'; import './App.css' function App(){ let [a,b] = useState('남자 코트 추천'); let posts = '강남 고기 맛집'; return ( 개발 blog { posts } 2월 17일..