모든지 기록하자!

Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다. 리액트의 컴포넌트는 클래스형과 함수형으로 나눠진다. 아래는 이전 게시물의 클래스 컴포넌트를 사용한 예제와 훅스를 사용한 예제이다. Class component Hooks 먼저 위 코드의 ref에 대해 알아보자 ref란 DOM에 직접 접근하기 위해 사용한다. Html을 작성할 때 와 같이 id를 사용한다. 특정한 id에 해당하는 DOM에만 스타일이나 자바스크립트에서 여러가지 작업을 할 수 있다. 이렇게 id를 붙이는 것 처럼 리액트에서도 DOM을 선택해 직접 접근하기 위해 ref를 사용한다. state 비교 //클래스형 state = { first: Math.ceil(Math.random() * 9), second:..

바뀌는 부분은 아래처럼 state로 등록해준다. state = { first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random() * 9), value: '', result: '', }; // 컨텐츠 render() { return ( {this.state.first} 곱하기 {this.state.second}는? // 올바른 input // 입력 안되는 input창 onChange가 없어 오류발생 // jsx 문법이기 때문에 input 뒤에 /로 닫아주지 않으면 오류가 발생한다. 입력! {this.state.result} ); } onChange함수가 없이 입력안됨 input 창에 value를 위에서 state로 지정했기 때문에 onChange..

JSX(JavaScript XML)은 Javascrpint에 XML을 추가하여 확장 문법이다. JSX은 Javascrpint의 공식적인 문법이 아니다. 브라우저에서 실행하기 전 바벨(리액트 라이브러리)을 사용하여 자바스크립트 형태 코드로 변환된다. // JSX 예시 function App(){ retrun( 테스트 ); } // 위와 같이 작성했을 시, 바벨이 아래와 같이 Javascript로 해석해준다. function App(){ return React.createElement("h1", null, "테스트"); } JSX문법 1. 반드시 부모 요소 하나가 감싸는 형태여야 한다. - Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM ..

IP만으로 한 번에 둘 이상 연결해야 한다면 어느 프로세스에서 처리할지 구분할 방법이 필요하다. 이 전 게시물에서 봤던 TCP/IP 패킷 정보에는 PORT 정보도 포함하고 있다. IP는 컴퓨터를 찾을 때 필요한 주소를 , Port는 같은 IP 내에서 프로세스를 구분 할 때 사용한다. 김영한 강사님의 이해하기 쉬운 비유는 IP가 아파트면 PORT는 그 아파트에 몇동 몇호인지 구분하는 것이다. 포트 번호는 크게 세 종류로 구분된다. 0번 ~ 1023번: 잘 알려진 포트로 사용하지 않는 것이 좋다. (well-known port) 1024번 ~ 49151번: 등록된 포트 (registered port) 49152번 ~ 65535번: 동적 포트 (dynamic port) 잘 알려진 포트번호의 예시 20 : FT..