분류 전체보기94 [영화 웹 서비스 만들기] #8. Effects ~6.4까지의 강의 App.js import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); console.log("call an api"); return ( {counter} click me ); } export default App; 딱히 달라진 건 없지만, state 변경시, 모든 코드가 다시 실행된다. console로 확인가능 위에서 state 변경 시 모든 코드가 다시 실행되는 것을 확인할 수 있었다. 그런데 가끔은 우리가 특정 코드의 실행을 제한하고 싶다. 즉, component가 처음 render되.. 2022. 3. 24. [영화 웹 서비스 만들기] #7. Create REACT App ~5.1까지의 강의 create-react-app을 사용한다면, 어플리케이션을 만듦에 있어 훨씬 쉬워질 것이다. create-react-app이 엄청나게 많은 스크립트와 사전 설정이 있기 때문이다. 시작하는 거 정리할 겸 나름 자세하게 적었음 1. nodejs 다운로드 node -v : 있는지 버전확인 가능함 2. npx 작동 3. npx create-react-app react-movie-service react-movie-service 자리에 자기가 원하는 이름을 적어주면 된다. 이렇게 하면 react-movie-service라는 이름을 가진 리액트가 생성되는데, 그 전에 저장될 공간을 옮기자~ 4. code react-movie-service vs코드에서 열기 참고) package.json으로 가면.. 2022. 3. 23. [영화 웹 서비스 만들기] #6. Props ~4.3까지의 강의~ 앞선 강의에서, 우리는 logic을 가지고 말 그대로 JSX를 분리된 component로 만들었다. ( 이런거) props는 부모 component로부터 자식 component에 데이터를 보낼 수 있게 해주는 방법이다. 앞서서, 자식 component는 부모 component의 데이터를 필요로 하지 않고, 독립적이 었다. (자식 component는 이런거 였고, 부모는 이었음) 이제, 부모 component로부터 자식 component로 데이터를 보내보자. 그 전에 props로 해결이 가능하게 될 문제들을 가정해보자. 어플리케이션은 다양한 버튼을 가지고 있는데, 어떻게 리액트 component를 재사용 할 수 있을까?! component는 단지 JSX를 반환하는 함수이다. 그게 co.. 2022. 3. 22. [영화 웹 서비스 만들기] #5. State ~3.9까지의 강의 역대급으로 긴 호흡이라 집중이 잘 안되는 것 같기도하고 길어서 전체 코드 대신에 부분 적으로 코드를 보도록 하도록 하자. setCounter을 설정해서 원하는 값으로 변경해주자. 이때 setCounter는 이전 값을 이용해서 현재 값을 계산해 내는 것 이기 때문에, setCounter를 다르게 설정해 줄 수 있다. 1. 직접 값 설정 setCounter(counter+1); 정해진 값으로 나옴. 2. 함수 전달 setCounter((current) => current+1); 현재 값을 가지고 계산을 해야 한다면, setCounter 안에 함수를 넣자. 이렇게 한다면 다음 state 값이 현재 값을 바탕으로 나온다. 즉, 함수가 언제나 현재 state를 얻을 수 있도록 해줄 것이다. 결.. 2022. 3. 21. [Next.js] Vercel 오류 및 Next.js 구조 Next.js로 프로젝트를 만든 후에 Vercel로 배포하려고 했는데 계속 에러가 났다... npm run dev로 하면 local로는 열리는데, 배포할 때 오류가 생겼다. 구글링해서 하라는 거 다 했는데도 되지 않아서 왜지? 싶었다. 고치려고 노력했으나 되지 않았고, 그냥 무시하고 진행했다. 그러다가 오늘 할 거 다 해서, 다시 한번 시도했는데, 드디어 에러를 해결했다. 정말 간단한 실수때문에 일어난 일이었는데, 헛짓거리를 했기에 나같은 사람이 다시 없길 하는 바람에서 글을 작성한다. ~intro는 여기까지~ npm run build --prod 명령어 입력하면, 어디서 오류가 났는지 알려주고, 친히 링크까지 알려준다. 링크들어가서 오류 해결하는게 제일 빠른 방법 page-without-valid-co.. 2022. 3. 19. [영화 웹 서비스 만들기] #4. setState ~3.3까지의 강의 State는 기본적으로 데이터가 저장되는 곳이다. 전체코드 사용자에게 변화를 줬다는 걸 보여주려면 render를 호출해주면 된다. render가 최초로 호출될 때, Container 함수를 넣어주면 된다. 렌더링(rendering) html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말한다. React에서 저장하고 자동으로 re-rendering을 배우는 방법을 배워보자. const [counter,setCounter] = React.useState(0); useState 사용했을 때 배열 하나를 주는데, 배열 첫번째요소 우리가 담으려는 data 값(=counter)이고, 두번째 요소는 data 값을 .. 2022. 3. 19. 이전 1 ··· 11 12 13 14 15 16 다음
