뭐라도 기억하기 위한 블로그

✨ State란? 데이터가 저장되는 곳 이전에 vanilla JS로 만들었던 counter를 state로 만들 수 있다. (바뀌는 데이터) ① 화면에 UI그려주기 마찬가지로 임시로 react를 연습해보기 위해서는 해당 script src를 import 해준다. const root = document.getElementById("root"); let counter = 0; //counter 초기값 변수 설정 const Container = () => ( Total clicks: 0 click me ); ReactDOM.render(, root); ② 변수 담아주기 vanillaJS : span.innerText를 이용해서 span의 텍스트를 바꿔줌 span.innerText = `Total clicks: ..

이전까지 정리한 createElement는 번거로운 방식이다. React element를 생성하는 더 편리한 방식을 사용해야 한다. 더 편리한 도구로 JSX 사용 JSX란? Javscript를 확장한 문법을 의미 ✨ 기존에 쓴 문법을 JSX방식으로 수정하기! ① React.createElement를 JSX로 수정하기 //기존코드 const h3 = React.createElement( "h3", { id:"title", onMouseEnter: () => console.log("mouse enter"), }, "Hello, Im a span" ); //JSX const Title = ( console.log("mouse enter")}> Hello, Im a span ); jsx는 일반 html 코드와 ..

✨ React JS로 버튼 만들기 이전 React JS 기초 01 정리에서는 Javascript로 count 버튼을 만들었다면, 이번엔 드디어 React JS로~~ ① ui 그리기 const root = document.getElementById("root"); const h3 = React.createElement("h3", null , "Hello, Im a span"); const btn = React.createElement("button", null, "click me"); // **span과 button을 둘다 render하고 싶다면? const container = React.createElement("div", null, [h3, btn]); ReactDOM.render(container,..

미루고 미루고 미루다 드디어 마음잡고 다시 공부를 시작해보았는데... 내가 강의를 끝까지 듣고 정리할 수 있을지 모르겠지만 일단 시작이 반이라니까~ 반은 한거 아닐까 ㅎㅎ 해당 정리는 노마드코더의 https://nomadcoders.co/react-for-beginners 강의를 직접 수강후 정리하였습니다 ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co ✨ ReactJS를 사용하는 이유 상위 1만개의 웹사이트 중 45%가량은 React를 사용 (에어비앤비, 인스타그램, 페이스북, 넷플릭스) 페이스북이 ReactJS를 만들었고, reactJS에 막대한 투자를 하고있음 금방 폐기되지 않을 가능성 높음. 큰 커뮤니티를..