프론트엔드 기록

컴포넌트 만들 때 function 쓰면 된다고 했는데 예전 리액트에선 class 문법을 사용했습니다. 옛날엔 어떻게 했는지 알아봅시다. 지금은 그냥 function 쓰라고 권장하기 때문에 참고만 하셔도 됩니다. class 문법으로 컴포넌트 만드는 법 class Modal2 extends React.Component { constructor(){ //constructor() 안에 super() super() } render(){ //그 밖에는 render() return ( 안녕 ) } } 1. class 어쩌구 작성하고 컴포넌트 이름 작명합니다. 2. constructor, super, render 함수 3개 채워넣습니다. 기본 템플릿같은 것임 3. 컴포넌트는 길고 복잡한 html 축약할 때 쓴다고 했습..

리액트 2023. 8. 30. 16:41

리액트에서 유저가 입력한 input 데이터는 어떻게 처리하는지 알아봅시다. 실은 쌩자바스크립트 문법이랑 똑같습니다. 태그 사용하기 유저의 입력을 받을 수 있는 박스를 생성하고 싶으면 html에선 다음과 같은 태그들을 이용가능합니다. 이거 말고도 다양한 종류의 인풋 박스가 많으니 필요할 때 찾아쓰도록 합시다. 에 뭔가 입력시 코드를 실행하려면 유저가 에 뭔가 입력시 코드를 실행해주고 싶을 때가 많습니다. 그러고 싶으면 onChange 아니면 onInput 이벤트핸들러를 부착하면 됩니다. { 실행할코드 }}/> onChange, onInput은 에 유저가 뭔가 입력할 때마다 안에 있는 코드를 실행해줍니다. 진짜인지 console.log(1) 이런거 넣어서 테스트해봅시다. (참고) 이벤트 핸들러들은 매우 많습..

리액트 2023. 8. 30. 16:19

오늘은 새로운 내용은 없고 지금까지 배웠던 내용들로 재밌는 기능을 만들어봅시다. 지금 글 누르면 모달창이 뜨는데 안에 0번 글제목만 보이고 있습니다. (안뜨면 뜨게 하십시오) Q. 지금 누른 글제목이 모달창안에 뜨게 하고 싶으면 어떻게 코드를 짜야할까요? 0번 글을 누르면 0번 글제목이 모달창안에 등장하고 1번 글을 누르면 1번 글제목이 모달창안에 등장하고 그런 식으로 동작하게 만들어봅시다. 다 배운내용이라 강의 듣지말고 알아서 해봅시다. 내 풀이 import './App.css'; import { useState } from 'react'; function App() { let [글제목, 글제목변경]=useState(['남자 코트 추천','강남 우동맛집','파이썬 독학']); let[likes,setL..

리액트 2023. 8. 30. 15:29

모든 변수는 함수탈출불가능하다. 자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶으면 그냥 쓰면 안되고 props로 전송해서 써야합니다. 뭔소린지 알아봅시다. 일단 모달창 잘 띄우고 시작해봅시다. 안에 글제목 state 가 필요한데 저번에 만든 내부에 글제목 state를 집어넣고 싶으면 어떻게하죠? 예를 들면 이렇게 하면 될듯요 function App (){ let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( ) } function Modal(){ return ( { 글제목[0] } 날짜 상세내용 ) } ▲ 하지만 제대로 실행되지 않습니다. '글제목'이라는 변수가 define 되지 않았다고 에러가 뜹니다. 왜냐면 글제목이..

리액트 2023. 8. 30. 14:52

똑같은 html이 반복적으로 출현하면 반복문을 이용해서 쉽게 똑같은 html을 생성할 수도 있습니다. 안타깝게도 for 반복문은 JSX 중괄호 안에서 사용할 수 없어서 map() 을 대신 사용합니다. 자바스크립트 map 함수 쓰는 법 모든 array 자료 우측엔 map() 함수를 붙일 수 있습니다. 자바스크립트 기본함수 같은건데 용도를 알아봅시다. map 함수는 JSX 문법이어서 return문 안에 사용할 수 있는데 쓸 때 { } 내부에 써야 합니다. !!! map이 쓰기 싫다면 for문 써도 되지만 return문 밖에 써야 한다는 점 ! var 어레이 = [2,3,4]; 어레이.map(function(){ console.log(1) }); 기능 1. array에 들어있는 자료갯수만큼 그 안에 있는 코드..

리액트 2023. 8. 30. 14:06

오늘은 모달창 기능을 어떻게 만드는지 알아봅시다. "제 완벽한 코드 따라치세요 그럼 모달창 완성~~" 식으로 가르치면 저도 편하고 좋지만 그렇게 배우면 평생 모달창밖에 못만드는 것임 "동적인 UI 알아서 만드는 3-step" 을 알려드릴테니까 이거 가지고 알아서 혼자 코드짜십시오 리액트에서 동적인 UI 만드는 step 동적인 UI가 뭐냐면 유저가 조작시 형태가 바뀌는 모달창 탭 서브메뉴 툴팁 경고문 등 그런 UI들을 의미합니다. 1. html css로 미리 UI 디자인을 다 해놓고 2. UI의 현재 상태를 state로 저장해두고 3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성 이렇게 코드짜면 완성입니다. 그래서 글제목 누르면 전에 만들었던 이게 뿅 등장하는 모달창 기능을 만들어봅시다. ..

리액트 2023. 8. 30. 13:36

오늘은 모달창처럼 뜨는 상세페이지를 한번 만들어보면서 Component 문법을 알아봅시다. 상세페이지 겸 모달창 UI를 하나 만들어봅시다 일단 html css 레이아웃 디자인부터 해봅시다. 제목 날짜 상세내용 .modal{ margin-top : 20px; padding : 20px; background : #eee; text-align : left; } 당연히 css 코드는 css 파일에 넣어야합니다. 모달창 겸 상세페이지 완성 끝 return( ) 근데 html 코드짤 때 유의점이 있는데 return ( ) 안에 두개의 html 태그 나란히 적기 이런거 안됩니다. return ( ) 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야합니다. return( ) 그래서 굳이 두개를 나란히 적고 싶으면 저..

리액트 2023. 8. 29. 11:18

function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( { let copy = 글제목; copy[0] = '여자코트 추천'; 글제목변경(copy) } }> 수정버튼 ) } array, object 자료 다룰 때는 원본 데이터를 직접 조작하는 것 보다는 기존값은 보존해주는 식으로 코드짜는게 좋은관습입니다. (왜냐면 원본 막 바꿔버렸을 때 갑자기 원본이 필요해지면 어쩔 것임) 그래서 let copy 같은 변수에다가 기존 array를 복사해놓고 그걸 조작하는 식으로 코드짜면 조금 더 안전합니다. 근데 사기인듯 수정버튼 눌러도 안바뀌는데요 copy 변수에는 화살표가 저장된 것임. 글제목의 array를 가르키..

리액트 2023. 8. 29. 10:59