전체 글 (131) 썸네일형 리스트형 [ReactJS] 프로젝트 [1] - 준비, Create React App(npx create-react-app) create-react-app 은 리액트 어플리케이션을 만드는 최고의 방식이다. 이전의 react application은 스크립트를 import 하면서 만들어 기본적으로 우리가 다 해야 했지만 create-react-app 을 사용한다면 ReactJS를 만드는 게 훨씬 더 쉬워질 것이다. 왜냐하면 create-react-app 은 엄청나게 많은 스크립트들과 사전설정들을 유저를 위해서 준비해주기 때문이다 개발 서버에 접근하다거나, 자동으로 새로고침을 해준다거나 즉각적으로 CSS를 적용시켜주는 기능들이 있다. 또한 웹사이트를 publish 할 준비가 된다면 create-react-app 은 publish 하는 명령어도 가지고 있다. 코드를 압축하고 더 빠르게 만든다. 모든 react application을 .. [ReactJS] Prop Types 컴포넌트를 다뤄야할 때 알아야 하는 마지막이다. Prop 덕분에 우리가 컴포넌트의 환경을 원하는 만큼 설정할 수 있기 때문이다. 뭐든 원하는 건 다 보낼 수 있다. 문제는, 컴포넌트에 Prop를 보내고 있는데 그게 굉장히 많을 때 발생한다. (style 의 property와 prop으로 보낸 것의 이름이 같을 경우 style 에서 그냥 prop 이름만 적어줘도 된다.) 팀원과의 협업 중 보내지 말아야 할 데이터를 보내야 한다던가 하는 일이 있다. 예를 들어 string 을 보내야 하는데 숫자를 보낸다거나, 그 반대의 경우 말이다. 코드 상에서는 괜찮지만 우리가 사용하는 컴포넌트 방식내에서는 오류일 거다. 그래서 react 에서 우리에게 에러 메세지를 보내 준다면 좋을 것이다. Prop Type 은 어떤 .. [ReactJS] Props, 커스텀 컴포넌트, React.memo() props 에 뭘 또 넣어줄 수 있을지 볼거다. 여기 Btn에 들어가는 onClick은 버튼 컴포넌트에 들어가는 Props 이다. 실제 이벤트리스너가 아니라 말이다. onClick을 return 하는 JSX의 HTML 안에 넣는다면 그건 이벤트리스너를 넣어주는 게 되겠지만 커스텀 컴포넌트에 onClick를 넣어주는 것은 이벤트 리스너가 아니다. 이건 단지 하나의 Prop인거지. 마찬가지로 단순히 커스텀 컴포넌트 안에 적어준 Props 이기 때문에 style 같은 걸 적어줘도 전혀 작동하지 않는다. 아래와 같이 해줘야된다. 커스텀 컴포넌트 안에 들어가는 건 단순히 Prop가 될 뿐이다. 이것들은 결코 실제 HTML 태그 안에 들어가지 않는다. state 를 만들면 modifier 함수가 생성된다. modi.. [JavaScript] todo list 만들기 form 은 submit 이벤트를 기본적으로 가진다. 이벤트 리스너 함수가 기본적으로 인자만 제공해주면 이벤트에 대한 정보를 담아 주기 때문에 event 라는 인자를 하나 두어 정보를 받아와 주자. 그러면 event 안에는 이 event 가 submit 이라는 정보 등 다양한 정보가 담겨있다. (JavaScript 에서 기본으로 이런 엄청난 기능을 제공한다.) 그 중 event.preventDefault() 를 해주면 submit 의 경우 reload(새로고침) 과 같은 default 동작을 못하게 할 수 있다. const todoForm = document.querySelector("#todo-form"); const toDoInput = todoForm.querySelector("#todo-form .. [ReactJS] Props isolation 과 encapsulation 을 하여 JSX를 분리된 컴포넌트로 만들었다. divide & conquer를 할 수 있게 해줬다. 무엇이 컴포넌트가 되어야 하는지 footer가 컴포넌트가 되어야 하는지. header 가 컴포넌트가 되어야 하는지. notification bar 가 컴포넌트가 되어야 하는지. 이 logic 들을 각각의 조각으로 나눌 것이다. Props 는 일종의 데이터를 전송할 수 있는 방식이다. 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 보낼 수 있게 해주는 방법이다. 이게 진짜 왜 필요한지를 알기 위해서는 이게 어떤 문제들을 해결할 수 있는지를 경험해 보아야 한다. 각각 버튼마다 컴포넌트를 만든다고 생각해 보자. 컴포넌트라는 것은 단순히 어떤 JSX를 return 하는.. [ReactJS] Component 컴포넌트란? 컴포넌트라는 것은 단순히 어떤 JSX를 return 하는 함수일 뿐이다. [ReactJS] 시/분 변환기로 state 활용해보기 - 3, 확장과 분리 MinutesToHours, KmToMiles, App, 세개의 컴포넌트와 root를 가져와 App 컴포넌트를 넣어주는 부분을 분리해 주었다. MinutesToHours() 컴포넌트는 이전의 작업했던 시/분 변환기의 내용을 그대로 담고있다. KmToMiles() 컴포넌트가 새롭게 해주려는 것이다. App() 컴포넌트에는 각각의 변환기를 선택할 수 있게끔 설정하려고 한다. input에 value를 주는 것은 나중에 수정할 것을 염두에 두는 행위다. ReactJS는 return 하는 괄호안에서 javascript를 쓰고 싶으면 {} 괄호를 열고 써주면 된다. 지금 하고 있는 건 index 의 변화를 listening 해주고 있는 것 뿐이지. state를 사용할때 기억해야하는것은 modifier로 state를.. [ReactJS] 시/분 변환기로 state 활용해보기 - 2 Flip, Reset 기능 구현 input 에서 disabled 속성을 설정해 준다 하였을때 고민이 됐다. 어떻게 하면 태그를 지정하지? HTML 처럼 id 로 가져와야 되나 하고 있었는데 지나고 생각해보니깐 가져올 필요가 없다. 그냥 중괄호에 변수명을 써주고 그걸 태그 안에 속성값 = {변수}을 해주면 되는 것이었다. ReactJS를 쓰는 이유가 이것인데 말이다. input 에는 disabled라는 속성이 있는데 이를 false, true로 설정하는 것이 가능하다. 이것은 좋은 소식인게 이를 이용하면 변수를 통해 제어가 가능해지기 때문이다. 그 변수를 state를 활용하면 된다. (더 많은 react 프로젝트로 익숙해 질 수 있도록 학습을 해야 겠다. 왜냐하면 그렇다면 다른 일반적인 변수들은 어떻게 호라용할까 파일형식은 어떻게 할까 .. 이전 1 2 3 4 5 6 7 ··· 17 다음
