개발자연습노트

컴포넌트 만들 때 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 = '어쩌구' 이렇게 변수에 데이터를 저장했었는데 리액트에선 변수 말..

ㅇ