Lololol Lololol

대망의CRUD 버튼 만들기 a의 기능을 막고 모드를 바꾼다. { event.preventDefault(); setMode('CREATE');}}>Create 모드 관련 if문에 esif로 mode가 CREATE일때를 추가해준다 기능이 꽤 될 것 같으니 Create 컴포넌트를 따로 만들자 }else if (mode === 'CREATE'){ content= } 폼 구현 ... function Create(){ return Create Create }; ... 이용자가 버튼을 눌렀을 때 기능이 실행될 것이라 선포 form 태그 제출(submit)은 form 태그에 onSubmit으로 달아주면 된다 그런데 submit은 제출하게 되면 페이지가 리로드 되기 때문에 기능을 막아야 한다! function Creat..

또테이트 리액트 컴포넌트입력 prop 리액트 컴포넌트 함수가 처리 리액트 컴포넌트 출력 return prop과 함께 컴포넌트 함수를 다시 실행해서 새로운 return 값을 만들어 주는게 state 이란말이다. prop과 state 모두 값이 변경되면 새로운 return값을 만든다 차이점 prop 컴포넌트를 사용하는 외부자를 위한 데이터 state 컴포넌트를 만드는 내부자를 위한 데이터 본문을 클릭하면 그 글에 대한 상세보기가 나오는 웹 화면을 만들고 로고를 클릭하면 웰컴페이지가 나오게 할 것 function App() { const mode ='WELCOME' //mode의 값에 따라서 뭐냐에 따라서 본문이 달라지게 하려한다. ... let content = null; //변하게 될 값이니까 let으로 ..

모르는걸 계속 뚫어져라 보는게 도움이 될까? 모르는걸 계속 반복해서 읽어보는게 도움이 될까? 모르겠는걸 계속 반복해서 시청하는게 도움이 될까? 정말 모르겠는데 계속 반복해 따라하는게 도움이 될까? 이해가 되는지 모르겠는데 계속 반복 사용이 도움이 될까? 조금 알던게 더 알게되고 순서만 알던 것도 더 알게되고 순서를 따라다가 이해가 되기도 하고 0%에서 10%로 큰 발전을 한 느낌이 있다. 느낀다. 항상 느낀다. 어떤 것이든 반복 무조건 된다, 된다, 돼.

내가 만든 컴포넌트는 속성(props)는 있지만 이벤트 기능은 없다. 무언가 어떤 일이 발생했을 때 사용자가 추가적인 작업을 처리하게 하고 싶다 나도!!!! a태그가 달려있으니 href를 통해 가려하는 기본 기능을 막고 대신해서 onClick했을때 함수(function(){})이 실행되게 하는데 이 함수는 이벤트를 변수로 가지고 있다 onClick - props - onChangeMode function Header(props) { return ( { event.preventDefault(); //a 태그 기본동작을 방해한다! //onClick의 함수가 호출 되었을때 헤드의 props로 전달된 onChangeMode가 가리키는 함수를 호출해야한다. props.onChangeMode(); }}>{props..

내가 만든 컴포넌트도 속성값을 가질 수 있을까? 리액트는 속성을 PROP이라고 부른다. 그럼 오른쪽 사진에서 React라고 써져있는 부분을 하드코딩하지 않고 바꿀 수 있을까? 아래 코드에 Header 부분에 저렇게 title을 줘서 말이다 function App() { return ( ); } 그럼 Header컴포넌트를 확인해줘야 한다. 파라미터로 props를 주고 어떤 내용이 있는지 콘솔창에 찍어보자 function Header(props) { console.log('props', props); return ( React ); } props에는 객체가 들어오는데 title이 DUBU로 나온다 Header태그에 달아준 것처럼 말이다! 그러면 이 DUBU라는 텍스트를 얻어내려면 props에 있는 title..

리액트는 사용자 정의 태그를 만드는 기술이다. 어떻게? 왜? import "./App.css"; function App() { return ( Web html css js Welcome Hello WEB ); } export default App; 현재는 이렇게 간단한 페이지를 가지고 있는데 혹여 이 코드줄이 엄청나게 많다면 가독성이 좋지 않게된다. 그룹하고 이름을 붙여주는게 사용자 정의 컴포넌트를 만드는 것이다. 위의 header 부분을 다른 펑션을 사용해 이렇게 나누어 줄 수 있다. import "./App.css"; function Header() { return ( Web ); } function App() { return ( ... 이러면 이제 Header가 필요한 곳은 어디든지 간단하게 복사에..

실습 환경 구축 리액트를 사용해 사용자 정의 태그를 만든다. 사용자 정의 태그는 부품으로 사용되는데 남에게 공유할 수도 있고 남의 것을 사용할 수 있다. 이번 수업은 함수를 통해 리액트를 만드는 수업을 진행할 것. node.js는 이미 설치 되어있으니 넘기고 프로젝트 폴더를 생성한다 터미널에 "npx create-react-app my-app" 입력해 "my-app"이라는 새 프로젝트 생성 "npm start" 로 방금 만든 샘플 애플리케이션 실행 ? Something is already running on port 3000. Would you like to run the app on another port instead? » (Y/n) 위와 같은 메세지가 터미널에 뜬다면 이미 3000번 포트를 사용하고..

어제까지 리액트 기본 사용법과 props 그리고 state까지 사용법을 배웠다. 문제는 state 사용법에 너무나 헷갈리는 것 투성이여서 다른 무료 강의를 통해 한번 더 짚고 넘어가려한다. 원래 보는 강의보다 훨씬 간단하게 정의하는 수업을 찾았고 언제나 그랬듯 생활코딩 시작합니다.