React (35) 썸네일형 리스트형 컴포넌트(Components) React는 사용자 인터페이스를 구축하는 JavaScript 라이브러리입니다. 이런 라이브러리를 사용하는 이유는 조금 더 간단하게 사용자 인터페이스를 구축할 수 있기 때문입니다. React를 사용하면 작업은 훨씬 더 수월해지고 아주 사소한 것들에 신경 쓸 필요도 없어지며, 오류도 덜 발생할 것입니다. 이렇게 작업을 조금 더 단순하고 간단하게 하기 위해 React는 컴포넌트라는 중요한 개념을 사용합니다. 컴포넌트 다양한 사용자 인터페이스는 컴포넌트로 구성됩니다. 인터페이스를 구성하는 똑같은 형태의 틀에서 다른 데이터를 보이게 되는 것을 컴포넌트라고 할 수 있습니다. 위의 이미지로 예를 들면 같은 틀, 즉 네모난 틀에 각각 다른 글이 들어가 있는데 이것을 컴포넌트라고 합니다. 컴포넌트는 사용자 인터페이스에서.. class (컴포넌트 생성 방법1) 클래스는 class 키워드를 이용하여 정의하고, 프로퍼티와 메서드를 가질 수 있습니다. 메서드는 클래스에서 정의한 함수이며, 프로퍼티는 클래스에서 정의한 변수입니다. class Person { constructor() { this.name = "LSH"; } printMyName() { console.log(this.name); } } const person = new Person(); person.printMyName(); // LSH 출력 console.log(person.name); // LSH 출력 클래스의 인스턴스를 생성할 때는 new 키워드를 사용하여 생성할 수 있습니다. class Gender { constructor() { this.gender = "M"; } printGender() { .. Export와 Import JavaScript에서는 모듈 방식의 코드를 작성할 수 있는 기능이 있어서 여러 개의 파일로 코드를 분할하는 것이 가능합니다. 그래서 코드를 여러 파일로 나누고 Html 파일에 올바른 순서로 코드를 가져오기만 하면 됩니다. 문장을 내보내고 가져오는 모듈이라는 것은 JavaScript 파일 안에 있는 것으로 다른 파일에서 콘텐츠를 불러올 수 있고, JavaScript 파일은 그 컨텐츠가 어디에서 온 것인지 알 수 있습니다. 예시 코드와 함께 살펴보겠습니다. const person = { name: "LSH", }; export default person; person.js 라는 파일이 하나 있고, 상수 person에는 객체가 저장되어있습니다. 해당 상수를 default 키워드를 사용하여 내보낼 수 있고 이.. 이전 1 2 3 4 5 다음
