공부기록용

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co 버튼을 클릭할 때 어떤 동작을 수행하도록 하고 싶다. function App() { // state 생성 const[value, setValue] = React.useState("Save Changes") // 함수생성 const changeValue = () => { setValue("Revert Changes") } return ( ); } > UI 만들어주기 > UI의 컴포넌트에 프로퍼티인 onBtnClick는 이벤트리스너가 아니고 그냥 프로퍼티에 들어가는 단지 하나의 props일 뿐..

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co > Save Changes, Confirm 컴포넌트에 각각 스타일을 지정해 주었지만 이는 동일한 스타일이다. 좀 더 효율적인 유지 보수를 위해서 동일부분을 컴포넌트화 시켜서 적용할 부분에 뿌려주고자 한다. props function Btn() { return ( Save Changes ); } > Btn함수에 스타일을 적용한 버튼을 만드는 하나의 컴포넌트를 만들고 function App() { return ( ); } > 보여지는 UI에 Btn 컴포넌트를 가져온다. function App(..

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co function App() { const [index, setIndex] = React.useState(0); const onSelect=(event)=>{ console.log(event.target.value) } return ( Super Converter Minutes & Hours Km & Miles ); } Minutes & Hours Km & Miles 설정한 value 값을 잘 나타내고 있는걸 알 수 있다. 즉 사용자가 어떤 옵션을 선택했는지 알 수 있다. function A..

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co JSX는 HTML과 비슷하지만 몇 가지 다른 점이 있다. 💫 class → className class는 html에서 style값을 작성할 때 쓰이는 옵션으로, 원래는 html에서 class = "name"으로 태그 안에 넣는다. 하지만 React에서는 className으로 넣어서 class를 사용한다. 이렇게 쓰이는 이유는 React에서는 class함수, 화살표 함수 두 가지 방식으로 코드를 작성하기 때문에 class가 아닌 className으로 명칭을 사용한다. ▼ ​ for → htm..

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co state 사용전 사전 구조 설명 > 페이지가 로딩 되면 함수들은 제외 let counter = 0;이 가장 먼저 실행되고, 뒤에 함수들은 함수를 불러와야 기능을 하는데 let counter = 0;뒤로 함수를 불러오는 곳은 없으므로 let counter = 0;다음으로 ReactDOM.render(, root);이 실행되는 구조이다. > ReactDOM.render(, root);실행시 Container함수_컴포넌트가 렌더링됨 -> counter = 0; > 코드 어디에서도 UI를 새로고..

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co 암기 노노!!!!! cdn을 사용해서 온라인에서 바로 라이브러리를 끌어오는 것 react 의 js 파일(라이브러리) > 비어있는 div는 ReactDOM이 React element를 가져다 놓을 곳 const root = document.getElementById("root"); > 그래서 root div를 가져온 후 ReactDOM.render(container, root); // render : React element를 가지고 HTML로 만들어서 배치한다. 사용자에게 보여준다. > R..