니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어,[React] props types 자료형, 필수 값, 기본 값 지정 이번에는 crate react app에 대해 알아보겠습니다.이전 글을 보면 이전에 만든 리액트 어플리케이션은 스크립트을 직접 Import함으로 써 만들었습니다. create-react-app을 사용하면 많은 스크립트 import와 사전 설정을 알아서 해줍니다.개발 서버 접근, 자동으로 새로고침, 즉각적으로 어플리케이션 안에 css를 포함시켜 주는 등 여러 기능이 있습니다. 1. node...

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어,[React] React.memo() : 리렌더링 방지 방법이번에는 props types에 대해 알아보겠습니다. 1. 상이한 자료형 사용ReactJS자체에서는 지정한 props가 어떤 타입으로 작성을 했는지 모른다고 합니다.그래서, 이런 말도 안 되는 코드가 작동이 되죠. 버튼 1은 text를 문자형으로, fontSize를 숫자로 설정을 해서 사용하고 있는데버튼 2은 반대로 사용하고 있음에도 불구하고 오류가 나지 않습니다.function Btn({ text..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어,[React] 함수형 컴포넌트의 props 사용 이번에는 props를 조금 더 다양하게 사용해보겠습니다. 1. 주의사항!- 이 코드는 어떤 역할을 할까요? 버튼을 클릭하면 Save Changes가 Revert Changes로 텍스트가 변경되는?놀랍게도 아닙니다. 은 저희가 만든 컴포넌트로, 여기서 사용하는 onClick은 props의 명칭이지 이벤트리스너가 아닙니다.function Btn({ text }) { return ( ..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어, 이번에는 Props에 대해 알아보겠습니다. Props란 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법입니다.1. Props를 사용하지 않는 버전 - 우선 Props의 장점을 극대화하여 느끼기 위해, Props를 사용하지 않는 버전으로 각각의 버튼마다 컴포넌트를 만들고 스타일을 일일이 지정을 해줘야 합니다.function SaveBtn() { return ( Save Changes ..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어,[React] input state () - 단위변환기1 Warning : Invalid DOM property[React] 분 시, 리셋기능 - 단위변환기2 이번에는 km to miles 거리 변환기를 추가하여 단위변환기를 완성해보겠습니다. 1. 거리 변환기- 기존 시간 변환이랑 소스 형태는 거의 동일합니다.setUnit를 이용하여 km, miles의 상태를 변환시켜주고, setFlipped를 이용하여 km, miles를 전환시킬 수 있게 해줍니다.o..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어,[React] input state () - 단위변환기1 Warning : Invalid DOM property[React] 분 시, 리셋기능 - 단위변환기2 이번에는 두 개의 단위 변환기를 사용자의 선택에 따라 표출하도록 하겠습니다. 1. 코드 분리이전에는 안에 시간 변환기가 들어가있었습니다. 변환기를 하나 더 추가할 것이기 때문에 코드를 분리해주겠습니다. 2. 사용자 입력에 따라 코드 변환기 ..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어,[React] input state () - 단위변환기1 Warning : Invalid DOM property 이번에는 분을 입력하면 시로 출력,반대로 시를 입력하면 분을 출력,그리고 리셋 버튼을 붙여 단위변환기를 완성해보겠습니다. 1. 시 -> 분- 이전 글에 이어 분을 입력할 경우 hours에서는 value값을 분/60으로 변환을 하여 출력해줍니다. 소수점을 반올림하고 싶을 경우 Math.round()를 사용하면 됩니다.- 그리고 분에서는 값을 변경..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어,[React] State Functions (state 값 설정 방법 2가지)이번에는 JSX문법을 통해 단위변환기를 만들어보겠습니다. 우선 분-> 시간으로 바꾸기 위해 필요한 요소들만 먼저 추가해보았습니다. 문제 없이 이쁘게 잘 나온 것을 볼 수 있는데요, 사실 JSX문법 상 틀린 문법이 있습니다. 그 문법이 어떤 거인지 확인 하기 위해 react를 install하는 부분을 조금 수정해보겠습..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어,[React] JSX문법 기초 (JS to JSX)[React] 컴포넌트 state (React.useState(), setState) 이번에는 state 값을 설정하는 방법 2가지에 대해 배워보도록 하겠습니다. 1. 직접 새로운 값 설정- 필요한 소스만 가져왔습니다. 지난 번처럼 직접 새로운 값을 설정하는 방법은 다음처럼 setCounter()함수에 0,1처럼 값을 넣거나 기존 변수에 값을 계산하여 넣는 방법이 있습니다.let [counter, setCo..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에서 만든 컴포넌트에 이벤트를 적용시켜보겠습니다.[React] JSX문법 기초 (JS to JSX) 1. state이전글에서의 공부하려고 넣은 불필요한 옵션들은 제외하고 처음에 만드려고 했던 "버튼 클릭시 카운터 증가"하는 코드를 만들었습니다. 커스텀태그를 만들고, 이벤트 함수를 연결을 하였는데요, 기존의 js문법보다 훨씬 간단하고 한 눈에 보기 편하더라구요. 핵심 코드를 보면 카운트증가랑 렌더링..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 버튼 클릭 시 카운터가 올라가는 코드를 짜보겠습니다.보통 html, js 이용해서 짜라고 하면 다음과 같이 짤겁니다. 1. js 문법의 버튼 클릭 시 카운터 증가 Total clicks: 0 Click me 버튼을 클릭하면 이미지처럼 카운트가 아주 잘 됩니다. 개발자도구로 자세히 보면, 버튼 클릭시 span 자체가 다시 랜더링 되는 것을 확인 할 수 있습니다. 2. React js, Dom을 이용하여 createElemen..