준준의 기록일지

자바스크립트가 주, html 부가 되는 형식의 코드로 시대가 변해가고 있다. toString(2) : 숫자에 toString(2)를 하면 이진수로 변환된다. 컴포넌트 함수 명시 : 대문자 ex) Card, Name 리액트에서 컴포넌트를 만들때 가장 중요한 부분 상태(state) : 화면에 출력하고 싶은 것. this.state = {} function일때와 화살표일때 this의 의미가 다른데, function일 경우 this 값이 undefined로 정의된다. 해결방안 -> function (){}.bind(this)와 같이 정의한다. 화살표일 경우 this 값이 변하지 않고 잘 가져오므로 걱정할 필요 없다.

잘 설명된 props, state 블로그 trustyoo86.github.io/react/2017/11/18/props-state-react.html kern의 FE-Note kern의 Front-end 개발 노트입니다. trustyoo86.github.io props, state의 차이점을 통해 state를 알아보자. props : 사용자가 컴포넌트를 사용하는 입장에서 중요 -> 사용자가 컴포넌트를 조작할 수 있게 한다. (외부) state : props의 값에 따라 내부 구현에 필요한 데이터. -> 사용자가 알 필요 없는 부분. (내부) 두 부분 외부, 내부를 철저하게 분리하는 것이 중요하다. state는 컴포넌트가 다양한 일들을 할 수 있게 만든다. props에 하드코딩 된 값을 state로 만들고..

App.js에 컴포넌트를 만들때 render( return ( 하나의 최상의 태그만 넣어야 한다 ) ) 해당 그림은 유사 자바스크립트로 js랑 비슷하지만 html 규격에 맞게 까다롭게 정의하는 부분을 과감히 생략하는 느낌? jsx로 코드를 작성하면 create-react-app이 javascript 코드로 converting해준다. 각 구문을 컴포넌트화해서 방대한 양의 코드가 있어도 간결하고 가독성이 높아진다. 여기서 예를 들어 와 같이 같은 세개의 컴포넌트를 넣으면 3개가 각각 들어가겠지만, 중복된 값이 들어간다는 아쉬움이 있다. 이를 해결하기 위해 react는 props라는 속성을 가지고 있다. (html 의 attribute 속성과 비슷하다고 함) - 해당 구문은 react의 속성을 이용해서 위에 ..

구조 src, public이 있는데, public 밑에 index.html이 있다. index.html에서 가장 중요한 부분은 앞으로 생성하는 컴포넌트는 해당 구문 안에 들어가게 되어 있다.(커스텀가능) src안에서 파일을 생성하고 커딩하고, index.js - docment.getElementById('root') 용량을 엄청 줄여준다. 실 서버 환경이 완성되는 것. 새로고침할때 - 강력한 새로고침, hard reload로 계속 새로고침 대기상태, 성능을 높이기 위해 뭔가를 다운받는데, 해당 기능은 캐쉬를 전부 없애버린다. npm : 다운로드 받아서 계속 사용 npx : 한번만 사용할때 사용. (최신으로 리액트에서 요즘에 권장?) - npx serve -s build : 한번만 사용할 서브를 만들어서 ..