본문 바로가기

Study/React12

[노마드코더] ReactJS로 영화 웹 서비스 만들기 - setState https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co - React.useState()는 초기값을 설정할 수 있음 ex) React.useState(0) -> [0, f] : 초기값인 0과 data의 값을 바꿀 수 있는 함수가 들어있는 배열을 얻음 => 이 두 요소가 만나 countUp함수의 역할을 대신하고 있음 => counter라는 data를 주고, 그 counter 값을 바꿀 수 있는 함수를 - 어떻게 하면 배열에서 요소들을 꺼내서 이름을 부여할 수 있을 것인가? const [counter, modifier] = React.useStat.. 2023. 1. 10.
[노마드코더] ReactJS로 영화 웹 서비스 만들기 - State https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co 리액트의 가장 큰 장점 : 변경된 부분만 업데이트 됨(변경된 부분 + 변화가 일어난 부분의 자식 컴포넌트들까지) => 일반 js를 쓴 브라우저는 노드 정보가 바뀔때마다 노드 트리를 5단계에 걸쳐 처음부터 다시 생성 하지만 리액트는 가상dom을 써서 우리 눈에 보이는 부분만 수정해서 보여주고 모든 업데이트가 끝나면 일괄로 실제dom에 던져줌 => 브라우저 작동원리와 연관 프론트엔드는 렌더(트리)단계를 얼마나 최적화 하는가가 매우매우 중요!! 하지만 이 방법은 계속해서 render해주는 것을 .. 2023. 1. 5.
[노마드코더] ReactJS로 영화 웹 서비스 만들기 - react vs vanila js https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co Total Clicks: 0 Click me react : 어플리케이션이 interactive하도록 만들어주는 라이브러리 react-dom : 모든 react element들을 html body에 둘 수 있도록 해주는 라이브러리 또는 패키지 JSX란? - Javascript를 확장한 문법 - React 요소를 만들 수 있게 해줌 1. 복잡한 ver. 2. 간단한 ver. //생략 //sol1. const Title = () => ( console.log("mouse enter")}> Hel.. 2023. 1. 3.