FRONT-END/ReactJS Clone project9

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch03 | 6~7 State prac Flip input에 disabled를 사용하여 활성화 및 비활성화를 지정해 줄 수 있다. filpped와 setFlipped라는 변수를 만들고 불리언 값을 준다. const [flipped, setFlipped] = React.useState(false); const onFlip = () => setFlipped(!flipped); flipped가 true라면 부정명제인 !flipped는 fals false라면 true state값으로 input을 enabled할지 disabled 할지를 결정할 수 있다. 초기값이 false라고 정했으므로, Hours는 disabled 되어야 한다. 때문에 disabled={flipped === false}를 넣어줘서 flipped가 false라면, disabled는.. FRONT-END/ReactJS Clone project 2023. 1. 28.

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch03 | 5. Inputs and State ReactJS 배포용과 개발용 모드 react, reactdom을 import 하는 script tag에서 production -> development로 변경하는데 production은 배포 모드, development는 개발 모드를 의미한다. 개발모드는 버그로 이어질 수 있는 요소들을 미리 경고하는 검증 코드가 포함되어 있다. JSX에서의 HTML 태그 input 옆의 쓰는 label의 for 속성은 react에서는 htmlFor로 표시한다. controlled component :Input 태그 나오면 value, onChange 속성을 붙여서 상태를 관리하자 즉, JSX는 class / for과 같이 JavaScript에서 선점된 문법 용어를 사용 못한다. class는 className으로 for.. FRONT-END/ReactJS Clone project 2023. 1. 28.

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch03 | 4. State Functions State Functions state를 세팅하는 데는 2가지 방법 직접 할당 :setState(state +1) 함수를 할당:setState(state => state +1) (함수의 첫번째 인자는 현재 state 이다) 현재 state랑 관련이 없는 값을 새로운 state로 하고싶은 경우 - 첫번째 방법 사용 현재 state에 조금의 변화를 주어서 새로운 state를 주고 싶은 경우 - 두번째 방법 사용 function App() { let [counter, setCounter] = React.useState(0); const countUp = () => { // setCounter((counter += 1)); //현재 값을 가지고 계산 해야한다면 이 방법보다 함수를 사용하는게 좋음 setCount.. FRONT-END/ReactJS Clone project 2023. 1. 28.

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch03 | 1~2. setState [노마드/ReactJS 영화 웹 만들기] - Ch02 | 2. ReactJS setState let counter = 0; function countUp() { counter = counter += 1; console.log(counter); } 위 코드는 React에서 아래와 같이 코드를 작성할 수 있다. const data = React.useState(0) 배열을 호출할 때 좋은 short cut 있다. const animals = ['호랑이', '사자', '고양이']; console.log(animals[1]); //사자 위 코드는 일반적으로 배열을 출력하고, 아래 코드는 변수에 배열을 만들어 animals이라는 변수를 참조하게 해서 접근이 좋아졌다. const [first, second, thi.. FRONT-END/ReactJS Clone project 2023. 1. 26.

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch03 | 0. State? ReactJS State 바닐라 JS에서 버튼을 클릭하면 Count가 올라가는 함수를 이벤트 리스너와 함께 구현하면 다음과 같다. 클릭된 숫자: 0 클릭 바닐라 JS와 ReactJS는 값이 변경될 때 UI가 어떻게 rerender 되는지 확연하게 구분된다. ReactJS는 UI에서 바뀐 부분만 업데이트해주고, 바닐라 JS는 변경된 태그 전체를 업데이트한다. ReactJS로 변환 위 바닐라 JS코드를 ReactJS로 변환해 보자면 오류 확인 하지만 버튼을 클릭하면, 클릭 이벤트는 정상적으로 작동하지만 UI에 반영되지는 않는다. 웹 페이지가 처음 실행되면 Container은 함수이기 때문에 바로 실행되지는 않고, 페이지가 로드되면서 Container 컴포넌트가 딱 한 번 랜더링 된다. 이벤트 리스너를 등록하.. FRONT-END/ReactJS Clone project 2023. 1. 15.

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch02 | 6. 컴포넌트 사용 JSX에서 컴포넌트 사용 이전에 만들었던 container 부분도 JSX를 사용하여 변경해 보고, Title과 NewBtn을 컴포넌트 형식으로 변경해 웹에 뿌려보도록 하자. 컴포넌트 생성 방법 우리가 만든 컴포넌트를 사용하기 위해서는 반드시 Uppercase로 작성되었어야 했다. 그리고 이 컴포넌트를 Arrow function을 사용해 함수로 만들어 주면, 사용할 수 있는 컴포넌트로 바뀌게 된다. //Title에 arrow function을 사용해 함수로 변경해줌! const Title = () => ( console.log('타이틀에 마우스가 감지 되었습니다.')}> 안녕하세요 ); const NewBtn = () => ( console.log('클릭 되었습니다.')} style={{ border: '.. FRONT-END/ReactJS Clone project 2023. 1. 15.

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch02 | 5. JSX 사용법 JSX JSX는 자바스크립트를 확장한 문법이다. 보통 HTML이랑 비슷하지만 property를 HTML 태그의 속성처럼 사용하면 안 된다. 또한 반드시 컴포넌트는 uppercase로 넣어줘야 한다. /* 아래 방법은 절때 사용하지 않음 (기본 구조만 이해하면 됨) */ const Title = React.createElement('h2', { id: 'main-title', onMouseOver: () => console.log('타이틀에 마우스가 감지 되었습니다.') }, '안녕하세요'); /* 대신 JSX를 사용하는것이 훨씬 편리하고 많이 쓰인다.*/ const title = ( console.log('타이틀에 마우스가 감지 되었습니다.')}> 안녕하세요 ); 처음에 사용했던 기본 React 문법과 .. FRONT-END/ReactJS Clone project 2023. 1. 15.

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch02 | 3. Events in React ReactJS로 영화 웹 만들기 자바스크립트에서는 마우스와 같이 어떠한 이벤트를 주기 위해선 많은 단계를 거쳐야 한다. addEventListener를 사용하여 간단하게 보자면 아래와 같다. 안녕하세요 클릭 클릭 이벤트 위 바닐라 JS를 React로 바꿔주면 더욱 간편하게 이벤트를 적용시킬 수 있다. const를 render 하고 싶은 경우 div를 만들어준다. 그리고 React.createElement("div", null, \[title, btn\]); 와 같은 배열을 만들어서 const를 넣어준다. const container = React.createElement('div', null, [title, btn]); 이제 버튼이나 태그 안 property에 eventListener 넣는 것도 가능하다.. FRONT-END/ReactJS Clone project 2023. 1. 15.

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch02 | 2. 리액트 설정 및 기초 ReactJS로 영화 웹 만들기 React는 HTML, CSS, 자바스크립트만으로 웹 페이지를 만드는 것과 비교해 큰 이점이 있다. 프로그램 설계를 조직화할 수 있다. 웹 페이지를 HTML로 만들다 보면 같은 부분을 여러 번 다시 사용해야 하는 번거로움이 있지만, HTML만 봐도 페이지마다 공통적으로 바뀌는 부분을 일일이 인덱스를 이동하며 넣어줘야 한다. 그렇기에 웹 사이트가 커질수록 관리도 어려워지게 된다. 루트(route)가 수십 개이고 그 안에 사용되는 코드가 수 백 줄인 웹 사이트 라면 이 방법대로 하는 것이 아주 좋지 않다. 심지어 컴포넌트를 만들어서 넣어줄 수 도 없다. 그래서 만들어진 것이 Facebook에서 만든 ReactJS와 같은 프레임워크이다. 01) 전체 프로그램 설계를 깔끔하고 일.. FRONT-END/ReactJS Clone project 2023. 1. 15.