Frontend/React (8) 썸네일형 리스트형 [생활코딩] Create(에러) create로 새로운 글이 생성되고 상세보기 또한 생성 1. create 페이지로 이동하는 링크를 만들기 Create 2. mode의 값을 바꿔서 페이지를 바꾸기 때문에 mode를 바꿔야 한다. event.preventDefault(); 는 클릭했을 때 url이 바뀌지 않도록 처리하는 것 3. setMode('CREATE'); 모드 값을 바꾼다. 4. else if에 mode가 CREATE일 때 어떻게 컨텐트 값이 바뀌는지 넣는다. 5. 별도의 create 컴포넌트를 만든다. 6. 어떤 정보를 서버로 전송할 때 쓰는 html 태그는 form이다. 7. html에서 여러 줄을 표시할 때는 textarea 태그를 사용한다. 8. 전송할 때 쓰는 컨트롤은 submit이다. 9. create를 눌렀을 때 후속 .. [생활코딩] state(에러) state=리액트 컴퍼넌트 컴퍼넌트는 입력(Prop)과 출력(return) Prop과 함께 컴퍼넌트 함수를 다시 실행해서 새로운 리턴 값을 만들어주는 데이터는 state이다. Prop과 State 모두 이 값이 변경되면 새로운 리턴 값을 만들어서 UI를 바꾼다. 이들의 차이점은 Prop은 컴퍼넌트를 사용하는 "외부자"를 위한 데이터고 state는 컴퍼넌트를 만드는 "내부자"를 위한 데이터이다. 1. function App()에 const mode = 'WELCOME' 작성하기, const topics = {} 작성하기 2. if(mode === 'WELCOME'), else if(mode === 'READ') 작성하기 3. 그 위에 let content = null; content 변수 만들기 4. mo.. [생활코딩] 이벤트 Arrow Function을 이용()=>해서 코드를 나타내보았다. /* Header 컴포넌트 이벤트 기능 넣기*/ function Header(props){ return {props.title} //클릭을 했을 때 페이지 리로드가 되지 않게 하기 위해서 function(event)라고 event 객체를 첫 번째 파라미터로 주입한다. } 파라미터가 한 개인 경우 () 생략 할 수 있다. onChangeMode()를 호출하려면 props.onChangeMode(id값); id값을 얻어내려면 a 태그 안에 id={t.id}를 작성한다. id값은 event.target.id가 된다. 이벤트를 발생시킨 타겟의 아이디를 나타낸다. [생활코딩] props React는 속성을 prop이라고 부른다. /*prop 사용법*/ function Header(props){ //파라미터로 props를 준다. //console.log('props', props); props에 어떤 내용이 있는지 알아보기 위한 문장이다. 웹 페이지에서 개발자 도구를 켜서 console-props-Object가 들어온 것을 확인할 수 있다. Object의 내용에는 title: "REACT"가 있다. console.log('props', props.title); //props.title을 작성함으로써 Header 태그 안의 "REACT"가 출력된다. //{props.title} 이 문장 역시 "REACT"가 출력된다. return WEB //function Header() 안에서 내용을 바.. [생활코딩] 컴포넌트 만들기 복잡한 태그에 이름을 붙여서 사용자 정의 태그를 만든다. 리액트에서 사용자 정의 태그를 만들기 위해서는 반드시 대문자로 시작해야 한다. 사용자 정의 태그 = 컴포넌트 function Header()가 컴포넌트이다. div 태그 안에 Header 태그가 사용되었다. Header, Nav, Article 컴포넌트를 만들어서 사용했다. [생활코딩] 소스 코드 수정 방법 1. npm start를 작성하고 엔터를 누른다. 2. 웹 페이지가 새로 열린다. 3. src 폴더에서 index.js 파일을 연다. index.js는 입구이며 전역적인 설정들이 들어있다. 은 웹 페이지의 실체이다. [생활코딩] 리액트 실습 환경 구축 온라인 코드 편집기(React (forked) - StackBlitz) 설치(Create React App (create-react-app.dev)) node.js visual studio code 깃허브(GitHub - facebook/create-react-app: Set up a modern web app by running one command.) 명령어 npm start npm run build node.js를 설치했다면 npx라는 명령어가 사용이 가능하다. visual studio code에서 터미널-새 터미널을 누르면 명령어로 제어가 가능하다. 현재 디렉토리를 의미하는 키는 .(점)이다. visual studio code 프로그램을 껐다 켜면 터미널-새 터미널- npm start를 해야 웹 .. [생활코딩] 리액트란 React - 웹 개발을 위한 라이브러리 - 사용자 정의 태그를 만드는 것 - Facebook에서 개발한 오픈 소스 자바 스크립트 UI 라이브러리 React를 만드는 방법은 두 가지가 있다. 1. class 사용 2. function 사용 이전 1 다음
