🥬 상추의 공간

props는 부모에서 자식 Component로 데이터를 전달하고자 할 때 사용할 수 있다. 일반적으로 고정적인 데이터 값을 전달할 때 사용한다. state는 고정적인 데이터가 아닌, 변경될 수 있는 데이터를 처리할 때 효율적으로 사용된다. 다른 말로, 하나의 웹 사이트가 구상된 이후에도 내부적인 데이터가 계속해서 변경될 수 있는 경우(내부 객체 값이 변경될 여지가 있는 경우)에 효과적으로 사용된다. state 값을 변경해서 화면(view)이 변경되면 render() 함수가 다시 실행되어 실제 화면에 적용해준다. props만 이용하고자 한다면 함수형 컴포넌트를 사용했다. 그러나 state를 사용한다면 Class형 컴포넌트로 사용해야한다. 아래 코드는 3강에서 사용한 시계 코드이다. function tick..

React에서 Component는 JavaScript 함수와 흡사하다고 보면 된다. 어떠한 내용을 화면에 그려줄 지에 대해 정의하고 있는 JavaScript 함수 같은 거라고 이해하면 된다. 이러한 Component는 Props를 부모로부터 입력받아서 결과적으로 화면에 어떤 내용을 그릴지 React Element를 반환하는 형태로 동작한다. Props는 Property(속성)의 약자다. 객체 지향 프로그래밍에서 사용하는 '속성'의 의미와 동일하다. 부모 Component에서 자식 Component로 다양한 속성들을 정의해서 보내줄 수 있다. Props를 이용하여 React Component는 계층적으로 본다. 아래 두 코드는 동일한 기능을 수행한다. Component를 변수로 저장해서 render시켰냐의..

JSX JavaScript 문법의 확장판 react에서의 요소(Element)를 제공 요소는 tag 같은 것들을 모두 포함하는 HTML 단위이다. 마치 js와 html을 한 번에 합쳐 놓은 것 같은 문법 코드1 분석 function formatInfo(student){ return student.name + "["+student.id+"]"; } const student = { id: "20212195", name: "Lee Sanghee", color: "blue", } const element = ( {formatInfo(student)} ); element 변수에는 HTML 태그와 문자열이 포함되어 있는데, 이들이 JSX이다. html 코드 안에서 어떤 부분이 js코드임을 알리기 위해 중괄호를 사용..

코드펜(Codepen) 로컬이 아닌, 웹 상에서 빠르고 효과적으로 코드를 테스트 할 수 있는 사이트 코드펜에서 React 사용하는 법 먼저 파일을 만들고(New Pen) 다음 단계를 따라가면 된다. setting 클릭 JS 클릭 JavaScript Preprocessor에서 'Babel' 선택 Add External Scripts/Pens 에서 'react', 'react-dom' 검색하여 추가 Save & Close 버튼 클릭 babel: jsx 등의 기능을 이용할 수 있음 react: component 같은 기능 처리하도록 도와주는 라이브러리 react-dom: 웹 문서의 dom에 렌더링을 진행하는 라이브러리 기본적으로 웹 문서는 dom을 갖고 있다. > dom에 접근해서 다양한 웹사이트 화면을 그리..

React란? 개발하고자 하는 웹 사이트의 UI(화면, view)를 효과적으로 만들 수 있도록 도와주는 JavaScript 기반 *라이브러리 **라이브러리 : 프로그래밍을 작성하는 과정에 있어서 특정한 기능을 도와주는 함수들의 집합, 각각 함수들은 독립적으로 작동하므로 필요한 함수만 호출하여 쓸 수 있다. 특징 선언적 - 대화형 UI 작성에 유리, 데이터가 변경되었을 때 효율적으로 렌더링 수행 컴포넌트 기반 - 캡슐화된 컴포넌트가 상태관리 및 UI 구성 재활용에 굳 장점 *클라이언트 렌더링과 *서버 사이드 렌더링 지원 **클라이언트 렌더링: 웹사이트에서 어떠한 데이터를 받아옴에 있어서, 필요할때 그때그때 데이터를 받아오는 방식 **서버 사이드 렌더링: 미리 웹사이트 화면에 필요한 요소들을 서버 쪽에서 미..

nvm use로 Node.js버전을 변경하려니 아래와 같은 문구와 함께 거부가 되었다. exit status 5: Access is denied 관리자 권한으로 실행한 cmd 이용 필자는 git bash를 이용하고 있었다. cmd를 관리자 권한으로 실행해서 하면 된다고 해서 그렇게 해봤다. 관리자 권한으로 어떻게 여는 지 몰라서 일단 나는 아래와 같이 했다. nvm use {변경할 버전} 으로 버전을 바꿔보았다. 버전 바꾸는데 성공했다. - 그냥 궁금해서 관리자 권한으로 실행한게 아닌, 그냥 cmd로도 되는지 테스트 해봤다. 결론: 관리자 권한으로 실행한 cmd를 이용하자 ㅎㅎ.. 몇몇 프로그램을 실행하려고 할때 이렇게 관리자 권한을 요구하는 경우가 있다고 한다. ------ 혹시나 안되는 분은 윈도우 ..

예전에 작업했던 react 파일 npm start 시키는데 아래 에러가 뜨는 것이다.Error: error:0308010C:digital envelope routines::unsupported찾아보니까 내가 최근에 Node.js 버전을 최신꺼로 바꿔서 그런 것이었다.그래서 안정적인 lts 버전으로 다운그레이드 시켜야 했다. 필자는 아래와 같은 방법을 사용했다.  현재 나의 Node.js 버전 확인node -v필자는 최신버전인 v18.3.0을 쓰고 있었다. nvm 설치nvm는 Node Version Manager의 줄임말로뜻 그대로 Node.js의 버전을 관리하는 도구이다.이를 이용해 언제든지 사용할 버전을 쉽게 전환할 수 있다. 이를 설치하려면 아래 링크로 들어가면 된다. GitHub - coreybut..

이들은 배열의 각 요소에 대해 수행하는 메소드이다.   forEachforEach는 주어진 함수를 배열 요소 각각에 대해 실행한다.간단하게 생각하자면 for 반복문을 대신 사용하는 메소드이다. 참고한 강의의 강사님은 본인의 뇌피셜로 forEach 함수는대충 아래 코드의 주석처리 된 부분과 같이 만들어져 있을거라 하셨다. forEach는 두개의 매개변수를 받는데, 첫번째 매개변수는 콜백할 함수(predicate), 두번째는 thisArg를 받는다.js는 함수형 프로그래밍이 가능하다. 따라서 함수를 매개변수로 넘기는 게 가능하다.두번째 매개변수인 thisArg는 callback을 실행할 때 this로 사용할 값인데 생략할 수 있다./*function forEach(predicate, thisArg){ f..