Tech Log

정의 사용자가 웹 브라우저에서 DOM 요소들과 상호작용 하는 것을 말한다. 예) 마우스 커서를 올렸을 때 onmouseover 이벤트를 실행한다. 사용 시 주의사항 1. 이벤트 이름은 카멜 표기법(camelCase)으로 작성한다. ex)HTML의 onclick 은 onClick으로 작성 2.이벤트에 실행할 문자열을 전달하는 것이 아니라 함수로 전달한다. ex)onClick = "함수 이름()" 이 아니라 onClick = {함수이름}으로 작성 HTML에서 이벤트를 설정할 때는 큰 따옴표 안에 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다. 3. DOM 요소에만 이벤트를 설정할 수 있다. ex) 이 아니라 ... 와 같은 형태로 작성해야 한다. 컴포넌트에 자체적으로 이벤트를 설정하는 것이 아니..

마운팅 과정은 이전에 작성한 포스트 내용을 참고하면 아래와 같다. constructor compnentWillMount 가 아니고 이 메서드가 deprecated된 것이라 getDerivedStateFromProps() 사용 render componentDidMount 해당 코드는 설정한 나이에 3초가 지나면 나이가 추가되는 코드다. 현재는 나이를 30살로 설정해놓았다. 콘솔창을 보면 코드가 실행된 순서를 알 수 있다. constructor()가 먼저 실행되고 그 다음에 getDerivedStateFromProps()가 실행되었다. render()하기 전, getDerivedStateFromProps()에서 설정한 나이에 10을 추가했기 때문에 3초가 지나기 전에도 나이에 10이 추가돼서 나온 것이다. ..

컴포넌트 라이프 사이클 모든 리액트 컴포넌트는 라이프 사이클(수명 주기)가 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전, 준비 과정에서 시작해서 페이지에서 사라질 때 끝난다. 리액트를 사용할 때 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 해야 하거나 컴포넌트를 업데이트 하기 전후로 어떤 작업을 해야할 수도 있다. 또한 불필요한 업데이트를 방지해야 할 때도 있을 수 있다. 이와 같은 상황을 위해 컴포넌트의 라이프 사이클 메서드를 사용한다. 이러한 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용가능하다. (함수형 컴포넌트에서는 사용할 수 없다는 의미) 대신 함수형 컴포넌트에서는 Hooks를 이용해서 비슷하게 라이프 사이클 메서드를 사용할 수 있다. 라이프 사이클 메서드 종류 라이프 사이클 메서드..

async / await 사용 목적 비동기 처리를 위해 사용한다. 비동기 처리 문법에는 콜백(callback), 프로미스(Promise)가 있지만 이들의 단점을 보완하기 위해서 사용된다. async / await의 사용으로 코드가 가독성 좋아지고 작성하기 쉬워진다. (참고 : 동기 처리와 비동기 처리) 비동기 처리는 서버에 데이터요청을 했을때, 언제 완료될지도 모르고 기다릴 수 없기 때문에 나머지 코드를 먼저 실행하는 것이다. 동기(Synchronous)의 경우, 위 사진과 같이 작업이 여러 개 있다고 가정하자. 한 작업 실행 후에 해당 작업이 완료되어야 다음 작업을 진행할 수 있다. 그래서 우리가 데이터를 받아올 때 기다려야 한다. (이때 로딩 화면만 계속 보고 있을 수 있다) 비동기(asynchron..

JSX와 자바스크립트 JSX안에서는 자바스크립트 표현식을 쓸 수 있다. 자바스크립트 값을 JSX안에서 렌더링 할 수 있다. 위와 같이 작성을 해서 자바스크립트를 JSX에서 사용할 수 있다. 웹 페이지에 정상적으로 나오는 것을 확인할 수 있다. const 키워드에 대해서 잠깐 설명하자면 const 키워드를 사용하면 해당 값은 함수 단위가 아닌 블록 단위에서 쓰일 수 있다. let 키워드도 마찬가지로 scope가 블록단위다. let과 const는 한 블록 내에서 중복 선언이 불가능하다. let과 const의 다른 점은 const는 값을 한 번 설정하면 바꿀 수 없다는 것이다. 반면 let은 값이 유동적으로 바뀔 수 있다. let와 const와 다르게 var은 scope가 함수 단위이다. 2.2.1 조건부 연..

JSX 문법은 간략하게 소개하고 다음 포스팅에 다른 문법을 게시한다. JSX : 자바스크립트의 확장 문법이다. JSX로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트의 형태의 코드로 변환된다. *바벨 : 입력과 출력이 모두 자바스크립트 코드인 컴파일러를 말함. JSX 를 자바스크립트안에서 사용할 수 있게 해준다. JXS는 리액트로 프로젝트를 개발할 때 사용되며 공식적인 자바스크립트 문법이 아니다. 바벨을 통해 개발자들이 임의로 만든 문법이다. function App() { return ( Hello react ); } function App() { return React.createElement(“div“, null, “Hello “, React.c..

props는 properties의 약자이다. 컴포넌트의 속성을 지정할 때 사용한다. 따라서, 한 컴포넌트를 이용해서 속성을 매번 다르게 지정할 수 있다. 그 결과로 코드를 효율성있게 작성할 수 있게 된다. props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다. 다시 말해 props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값인데, 자식 컴포넌트에서는 props를 받아오기만 하고, 받아 온 props를 직접 수정 할 수 없다. 예를 들어, 위와 같은 컴포넌트가 있다고 하자. Subject 컴포넌트의 속성 값을, props를 이용해 변경해보자. 이전에 보인 Subject 컴포넌트의 코드를 이용해서 위와 같이 웹 페이지를 만들게 된다. aaa라는 글자를 이전 사진에 나온 웹페이지처럼 제목으로 ..

(본문의 내용과 관련이 없을 수 있겠지만, 위 코드에 쓰이는 태그를 잠깐 설명하자면 기능상으로는 영향을 끼치는 것이 없다. 그렇지만 코드를 읽기 쉽게 여기가 header라는 것을 알려주기 위해 사용한다. 와 태그도 마찬가지다) 만약에 사진 속에 있는 태그 안의 코드가 정말 많은 양의 코드로 이루어져있다고 하자. 마찬가지로 태그 안의 내용과 태그 안의 내용도 몇 만줄이 되는 코드로 이루어져 있다고 하자. 그 결과는 코드를 읽기가 어렵고 혼란스러운 상태가 될 것이다. 이때 코드를 읽을 때는 , , 태그를 숨겨놓았지만, 웹 페이지 상에는 그 내용의 코드가 있다면 편할 것이다. 예를 들면 위와 같은 것이다. 정말 긴 태그와 그 내용이 있다고 하고, 그것에 따로 이름을 붙여 라는 태그로 대체한다고 하자. 매우 긴..