그 땐 Front했지/그 땐 React했지 (38) 썸네일형 리스트형 [노마드/React로 영화 웹 서비스 만들기] Ch02 THE BASICS OF REACT | 5. JSX 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. JSX코드로 바꾸어보자! 👉🏻짠! 전체 코드 const btn = React.createElement( "button", { onClick: () => console.log("im clicked"), style: { backgroundColor: "tomato", } }, "Click me!" ); const Button = ( console.log("im clicked")} > Click me! ); 👉🏻위의 코드가 이전 강의까지 작성했던 코드 찐 리액트 코드이고 아래가 JSX를 이용해 간략하게 적은 코드이다. JSX코드를 사용하기 위해서는 찐 리.. [노마드/React로 영화 웹 서비스 만들기] Ch02 THE BASICS OF REACT | 3. Events in React 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. React로 이벤트 달기 👉🏻일단 전체 코드! Click me const btn = React.createElement("button", {onClick: () => console.log("im clicked"), style: {backgroundColor: "tomato",}}, "Click me!"); 👉🏻빨간 배경의 클릭하면 콘솔에 "im clicked"가 출력되는 버튼을 만들었다. 이 코드는 위의 JS 3줄을 사용해야 하는 코드를 한 줄로 줄일 수 있는 React의 장점을 보여준다. const container = React.createEl.. [노마드/React로 영화 웹 서비스 만들기] Ch02 THE BASICS OF REACT | 2. Our First React Element 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. 리액트 실행 과정을 바닐라 자바스크립트와 비교해보자 Vanilla Javascripts Total clicks : 0 Click me 👉🏻버튼을 클릭하면 숫자를 올려주는 기능을 만들기 위한 코드이다. React JS 👉🏻먼저 React를 사용하기 전에 이 두 가지 스크립트를 넣어준다. 첫 번째: 우리가 만드는 어플리케이션의 UI가 interactive하게 만들어준다. 두 번째: React코드로 만든 html요소를 body tag에 들어갈 수 있게 해준다. 👉🏻React 코드이다. id가 root인 HTML 요소를 가져온다. createElement로.. [생활코딩/React] 2022개정판 | 10. delete 참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 1. 리스트를 삭제해보자! delete 기능을 만들어보자 function App() { ...중략... if (mode === "WELCOME") {...} else if (mode === "READ") { ...중략... contextControl = { event.preventDefault(); setMode('UPDATE'); }}>update { const newTopics = [] for(let i = 0; i < topics.length; i++) { if(topics[i].id !== id) { newTopic.. [생활코딩/React] 2022개정판 | 9. update 참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 1. update 기능을 만들어보자! update 버튼을 만들어보자! 상세 글을 클릭했을 때 update버튼이 나오게 할 것이다. function App() { ...중략... let content = null; let contextControl = null; if (mode === "WELCOME") {...} else if (mode === "READ") { ...중략... contextControl = { event.preventDefault(); setMode('UPDATE'); }}>update } else if .. [생활코딩/React] 2022개정판 | 8. create 참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 1. 목록을 crate해보자! Create 버튼 만들기 function App() { ...중략... return ( ...중략... { event.preventDefault(); setMode("CREATE"); }}>Create ); } 👉🏻App의 return 부분에 a tag로 Create 버튼을 만들어준다. onClick 이벤트에 a tag의 기능을 막아주고 mode state를 CREATE로 변경해준다. Nav에 리스트 CREATE 하기 function Create(props) { return ( Create .. [생활코딩/React] 2022개정판 | 7. state 참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 1. state state값에 따라 article 내용 변경시키기 먼저 article 내용을 welcome과 read로 나눠 표시해보자! import {useState} from 'react'; function App() { const [mode, setMode] = useState("WELCOME"); const topics = [ {id : 1, title : 'html', body : 'html is ...'}, {id : 2, title : 'css', body : 'css is ...'}, {id : 3, titl.. [생활코딩/React] 2022개정판 | 6. 이벤트 참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 1. 이벤트 Header component Header 컴포넌트에 이벤트를 달아보자! function App() { const topics = [ {id : 1, title : 'html', body : 'html is ...'}, {id : 2, title : 'css', body : 'css is ...'}, {id : 3, title : 'js', body : 'js is ...'}, ] return ( { alert('Header!'); }}> ); } 👉🏻일단 App의 Header에 onChangeMode라는 .. 이전 1 2 3 4 5 다음
