📚 Study/JS, JQuery

[React JS][니코코딩] Effects

6.0 Introduction React로 작업할 때 마지막으로 가장 중요한 걸 공부할 거다. 문제를 하나 정의 할 거다. 우리는 계속 state를 change해 왔고, 그럴 때 마다 이 모든 것이 다시 실행되는 것에 익숙 했다. 문제 component 처음 render될 때만 코드가 실행되길 원할 수 있다. 지금은 내 state가 변할 때마다 매번 이 console.log가 실행될 거다. 가끔은 첫번째로 render할 때만 코드를 실행하고 싶을 수도 있다. 첫번째 render에만 코드가 실행되고, 다른 state변화에는 실행되지 않도록 하는 거다. 우리는 어떻게 특정 코드들이 첫번째 componet render에서만 실행되게 하는지 배우고 싶다. 처음 한번만 나중에 state가 변화해도, 그 코드는 다..

[React JS][니코코딩] Create react App

# 5.0 Intruduction create-react-app은 리액트 어플리케이션을 만드는 최고의 방식이다. 이전에 만든 리액트 어플리케이션은 스크립트를 import함으로써 만들어 졌다. create-react-app을 사용한다면 , ReactJS 어플리케이션을 만듦에 있어 훨씬 쉬워질 거다. 이유는 create-react-app은 엄청나게 많은 스크립트들과 많은 사전설정들을 우리를 위해서 준비해주기 때문이다. 예를 들면, 우리가 create-react-app을 이용해서 작업을 할 때, 즉 create-react- app을 사용해서 어플리케이션을 만들면 개발 서버에 접근한다든가, 자동으로 새로고침을 시켜준다던든가 즉각적으로 어플리케이션 안에 CSS를 포함시켜 준다든가 하는 기능들이 있다. create..

[React JS][니코 코딩] Props

4.0 Props 무엇이 컴포넌트가 돼야 하는지, header가 컴포넌트가 되어야 하는지 알게 될거다. footer가 컴포넌트가 되어야 하는지, notificaion bar가 컴포넌트가 되어야 하는지 이 각각의 로직들을 각각의 조각들로 분리시켜서, 다른 자식 컴포넌트를 Rendering 하는 큰 부모 컴포넌트를 가질 수 있다. Props는 일종의 방식이다. 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법 우리가 할 것은, 한 예시를 만들거다. 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 보내는 거다. Props를 이해하기 위해서, 그리고 진정으로 이게 왜 필요한지를 보기 위해 Props로 해결이 가능하게 될 문제들을 일단 먼저 겪어봐야 한다. 가정(우리가 회사에서 어플리케이션을 만..

[React JS][니코 코딩] STATE

3.0 Understanding State state는 기본적으로 데이터가 저장되는 곳이다. 바닐라 JS로 예제를 완성시키려면 counter를 증가시키고 그걸UI에 디스플레이 하고 있다. 그걸 state로 만들 수 있다. counter말이다. 어떻게 하면 React.js어플에 값이 바뀔 데이터를 담아줄수 있을까. 이제 React.js 코드 내에서 카운트를 셀 수 있게 만들어 보자. 두가지 방식이 있다 좋지않은 방식과 다른하나는 우리가 해야할 최고의 방식이다. 먼저 별로 좋지 않은 방식으로 해보고 우리한테 어떤게 필요하고, 어떤걸 해야되는지 이해하고 나서 프로페셔널한 React.js 방식을 보여준다. 그러면 왜 그런방식으로 하는 건지 이해할 수 있을거다. let counter= 0 ; 이런 변수들을 JSX..

[React JS][니코 코딩] THE BASICS OF REACT

2.0 Introduction 바닐라 JS 코드와 React JS 코드를 비교해볼 거다. React JS 는 UI를 interactive하게 만들어줌 화면에 버튼 하나와 텍스트 하나만 있을거다. 화면의 텍스트를 업데이트하고 싶다. 클릭할 때마다 화면의 텍스트를 업데이트해서 한번 두번 몇번이든 클릭 되었다고 나온다. 버튼을 만들고(HTML) 이 버튼을 HTML에서 찾아야 하니까 id나 class를 주어야 된다. Javascript에서 그 버튼을 찾아야 한다. 그래서 document.getElementById나 querySelector 등을 사용해야 한다. 그다음으로 button.addEventLister를 하고 function을 실행해야 할거다. React JS 팀은 이걸 안다. 버튼을 생성하는데 무엇이 ..

[React JS]Components와 Props

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 이 페이지에서는 컴포넌트의 개념을 소개합니다. 자세한 컴포넌트 API 레퍼런스는 여기에서 확인할 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것입니다. function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) ..

[REACT JS] 엘리먼트 렌더링

엘리먼트는 React 앱의 가장 작은 단위입니다. 엘리먼트는 화면에 표시할 내용을 기술합니다. const element = Hello, world; 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. 주의 더 널리 알려진 개념인 “컴포넌트”와 엘리먼트를 혼동할 수 있습니다. 다음 장에서 컴포넌트에 대해 소개할 예정입니다. 엘리먼트는 컴포넌트의 “구성 요소”이므로 이번 장을 읽고 나서 다음 장으로 넘어갈 것을 권합니다. DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가에 가 있다고 가정해 봅시다. 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때..

#1 React JS를 배워야하는 이유 [React JS 영화웹사이트]

페이스북은 여전히 React JS를 사용하고 있다. 인스타그램, 핀터테스트, 우버, 넷플릭스 이런 사이트들도 React JS를 사용한다. 1.1 Why React 페이스 북이 React JS를 만들었고, 이걸로 페이스북 웹사이트 전부를 다시 만들었다. React JS는 정말 큰 커뮤니티를 가지고 있다. React JS는 Javascript와 아주 가깝기 때문에, React JS로 작업할 때 대부분의 작업은 그냥 일반 Javascript에 대한 작업이다. React JS는 Javascript의 커뮤니티를 거의 다 빌려왔다. 이 커뮤니티가 거대하다. React JS를 배우고 작업하는 것은 여러분을 더 아능 Javascript 개발자가 되도록 하기 때문에 React JS를 기반으로 제작된 framework들이..

JSX란? (정의, 장점, 문법)

아래 변수 선언을 살펴봅시다. const element = Hello, world!; 위에 희한한 태그 문법은 문자열도, HTML도 아닙니다. JSX라 하며 JavaScript를 확장한 문법입니다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다. JSX는 React “엘리먼트(element)” 를 생성합니다. 다음 섹션에서는 DOM에 어떻게 렌더링하는지 알아보겠습니다. 아래를 보면 JSX를 시작하기 위해 필요한 기본사항을 찾으실 수 있습니다. 1. JSX란? React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하..