개발자연습노트

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

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

Q. 지금 누른 글제목이 모달창안에 뜨게 하고 싶으면 어떻게 코드를 짜야할까요?0번 글을 누르면 0번 글제목이 모달창안에 등장하고1번 글을 누르면 1번 글제목이 모달창안에 등장하고그런 식으로 동작하게 만들어봅시다. 다 배운내용이라 강의 듣지말고 알아서 해봅시다.   약간의 힌트는  직접 뭐라도 해보라고 드리는 힌트인데 모달창안의 제목도 일종의 동적인 UI입니다. 동적인 UI 어떻게 만들라고 했습니까  1. html css로 미리 디자인해놓고 2. 현재 UI의 상태를 state로 만들어두고3. state 종류에 따라서 UI가 어떻게 보일지 작성하랬습니다. 그러면 끝임 이제 나중에 필요할 때 스위치 (state) 조작만 하면 됩니다.       1. html css로 미리 디자인해놓고  다 한것 같군요 패스..

JSX 문법 1. html에 class 넣을 땐 className JSX 문법 2. 변수를 html에 꽂아넣을 때는 {중괄호} function App(){   var data = 'red';   return (                     개발 blog         안녕하세요               ) } 온갖 곳에 {} 중괄호를 열어서 변수들을 집어넣을 수 있습니다. href, id, className, src 등 여러가지 html 속성들에도 가능합니다. 위처럼 쓰면  이렇게 되겠군요. JSX 문법 3. html에 style속성 넣고싶으면   글씨  4. 변수 말고 , state 담기 이전 강의에서는 그냥 let posts = '어쩌구' 이렇게 변수에 데이터를 저장했었는데 리액트에선 변수 말..

안에 글제목 state 가 필요한데 저번에 만든 내부에 글제목 state를 집어넣고 싶으면 어떻게하죠? 예를 들면 이렇게 하면 될듯요   function App (){ let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( )}function Modal(){ return ( { 글제목[0] } 날짜 상세내용 )}▲ 하지만 제대로 실행되지 않습니다.'글제목'이라는 변수가 define 되지 않았다고 에러가 뜹니다.왜냐면 글제목이라는 state 변수는 function App()에 있지 function Modal()에 없으니까요.자바스크립트에선 다른 함수에 있는 변..

자바스크립트 map 함수 쓰는 법  모든 array 자료 우측엔 map() 함수를 붙일 수 있습니다. 자바스크립트 기본함수 같은건데 용도를 알아봅시다.  설명하다 var 어레이 = [2,3,4];어레이.map(function(){ console.log(1)});기능 1. array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행해줍니다.저러면 진짜로 console.log(1) 3번 실행됨    설명하다 var 어레이 = [2,3,4];어레이.map(function(a){ console.log(a)});기능 2. 콜백함수에 파라미터 아무렇게나 작명하면그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해줍니다.(그냥 소괄호안에 있는 함수를 콜백함수라고 합니다)저러면 진짜로 2, 3, 4가 콘솔..

리액트에서 동적인 UI 만드는 step 동적인 UI가 뭐냐면 유저가 조작시 형태가 바뀌는모달창 탭 서브메뉴 툴팁 경고문 등 그런 UI들을 의미합니다.  1. html css로 미리 UI 디자인을 다 해놓고2. UI의 현재 상태를 state로 저장해두고3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성이렇게 코드짜면 완성입니다.  그래서 글제목 누르면 전에 만들었던 이게 뿅 등장하는모달창 기능을 만들어봅시다.    step 1. html css로 미리 디자인해놓기  step 2. UI의 현재 상태를 state로 저장 state 하나 만들고거기에 현재 UI의 상태정보를 저장해두라는 소리입니다.  let [modal, setModal] = useState(false);저는 modal이라고 작명..

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

일단 글수정 버튼 만들기  설명하다 function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( { ??? } }> 수정버튼 )}대충 아무데나 버튼하나 만들고 이거 누르면 첫 글이 수정되는 기능을 만들어봅시다.저기 물음표안에 뭘 넣어야하죠?      설명하다 function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( { 글제목변경(['여자코트 추천', '강남 우동맛집', '파이썬 독학']) } }> 수정버튼 )}이러면 숙제 끝입니다. 버튼누..

JSX 문법 1. html에 class 넣을 땐 className 잘보면 평소에 짜던 html/css와 다른 부분이 있습니다.스타일을 주기 위한 class명을 넣을 때 class=" " 가 아니라 className=" " 이렇게 쓰는 부분이 좀 다른데 왜냐면 실은 App.js에 짜고 있는건 html이 아니라 JSX라고 부르는 이상한 언어라서 그렇습니다.   원래 리액트환경에서 하나 만들고 싶으면 자바스크립트로React.createElement('div', null) 이딴 식으로 어렵게 코드짜야합니다. 근데 그러면 유저들 다 도망가기 때문에 JSX라는 언어를 대신 사용합니다.JSX는 html과 사용방식은 비슷합니다.  근데 JSX는 일종의 자바스크립트라서 자바스크립트에서 사용하는 예약어인 class라는 키..