2023.04.08 - [Front end/React] - 클래스 컴포넌트의 형태와 리액트 데브툴즈 클래스 컴포넌트의 형태와 비교해보세요. 클래스 컴포넌트의 형태와 리액트 데브툴즈 클래스 컴포넌트 설명 render의 return 부분 화면을 그리는 부분이다. 실제로 보면 Like 버튼아니면 'You liked this.'라는 텍스트가 화면에 보인다. 즉, return 부분에 있는게 화면에 나오는것이다. 그러니 dongwookit.tistory.com function 컴포넌트는 class 컴포넌트와 다르게 render 라는 메서드가 없기 때문에 그냥 return 으로 화면을 그려주면 된다. 둘 다 뭔 짓을 하든 return 한 것이 화면이다. 클래스컴포넌트의 this.state와 대응 하는 useState..
클래스 컴포넌트 설명 render의 return 부분 화면을 그리는 부분이다. 실제로 보면 Like 버튼아니면 'You liked this.'라는 텍스트가 화면에 보인다. 즉, return 부분에 있는게 화면에 나오는것이다. 그러니까 우리는 화면에 나올 모든것들을 return 에다가 적어주면 되고, 위 코드처럼 조건에 따라 화면을 보여주고 싶다면 if문과 같이 써서 화면에 나올 태그들을 싹 다 적어주면 된다. html이지만 컨트롤을 자바스크립트가 하는셈이다. 그리고 리액트는 데이터를 중심으로 생각해야한다. 즉, 화면에서 달라질 부분을 state로 만들어야 한다. 위 코드를 실행시키서 화면에서 달라지는 부분을 확인해보면 버튼이 텍스트로 바뀔것이다. 그래서 UI(버튼과 텍스트)를 나타내는 상태를 liked ..
▼ 바벨 추가하는 코드 ▼ JSX 사용하는 곳은 타입도 바꿔줘야한다. 바벨 (React.createElement -> JSX ) 자바스크립트 파일에 과 같이 태그를 쓰는 문법이 가능할까? 당연히 안된다. 자바스크립트에는 저런 태그 쓰는 문법이 존재하지 않는다. 그런데 어떻게 리액트에서는 저런식으로 코딩을 할 수 있을까? 바로 바벨이라는 라이브러리 때문이다. 바벨이라는 라이브러리가 JSX 코드를 보면 우리 몰래 React.createElement로 바꿔준다. 즉, 바벨을 설치해야 JSX를 사용할 수 있는것이다. React17버전, React18버전 아직 회사에서 리액트 17버전도 많이 쓰인다. 그래서 회사에 들어가면 위 코드를 가장 먼저 확인해야한다. JSX 주의할 점 우리가 리턴부분에 작성하는 html ..
// 여기다가 LikeButton을 그린다. ▲ React 18버전 불러오는거임 ▲ ReactDOM 18버전 불러오는거임 ▼ 아래 두줄은 배포용 리액트에 대한 입문자들의 착각 결국 웹 브라우저는 html, css, JavaScript 밖에 못읽는다. 특히 화면을 구성하는것은 html,css 여야하고 이에 대한 동작은 JavaScript 여야한다. 여기서 리액트 라는게 새로운 존재가 아니고 리액트도 결국은 자바스크립트일뿐이다. 자바스크립트로 html,css를 만들어낼 존재일뿐이다. 그래서 우리는 리액트로 프로그래밍을 하더라도 결과물은 html,css,JavaScript가 나와야지만 브라우저가 파일들을 읽고 화면을 표시해줄수 있다. 리액트로 개발하는 방식은 크게 2가지 1. Class 방식 - 99% 거의 ..
git add * VS git add . git을 로컬에서 사용할 때 터미널을 이용해서 사용한다. 보통 $ git init $ cat > test.txt $ git add test.txt $ git commit -m " add test.txt " 이런식으로 사용한다. 그러나 파일이 여러개일 경우 $ git add * 로 모든 파일을 staged 상태로 만든다. 그런데 가끔 $ git add *을 하면 다음과 같은 상황이 나올때가 있다. git add * The following paths are ignored by one of your .gitignore files: git-add/ignore.txt Use -f if you really want to add them. 이 말은 .gitignore 에 현..
hello-world라는 프로젝트를 hello-people 계정의 repository에 업로드 하는 예시입니다. github repository를 hello-world라고 만들어줍니다. 프로젝트를 create-react-app을 사용해서 만들어줍니다. npx create-react-app hello-world 프로젝트 폴더 내로 이동해줍니다. cd hello-world/ .git 파일이 이미 존재하므로 git init을 하기 위해 지워줍니다. (rm은 언제나 조심해서 사용합시다) rm -rf .git git 환경을 만들어줍니다. git init 만들어준 hello-world repository를 remote로 등록해줍니다. git remote add origin ~~~ create-react-app으로 ..
state에 담긴 데이터가 array, object 데이터일 경우 state 수정할 때 약간 귀찮은 점을 알아보자. 버튼을 눌렀을때 state에 담긴 array 자료 중 첫번째 데이터 '자바스크립트의 역사' -> '자바스크립트의 this' 로 변경하고 싶다. function App(){ let [title, setTitle] = useState( ['자바스크립트의 역사', '리액트 useState', '프로그래밍 공부방법'] ); return ( { title[0] = '자바스크립트의 this'; setTitle(title) }}> 수정버튼 ) } 이래도 된다. (제대로 동작은 안됨) array 자료안의 X번째 항목을 변경하고 싶으면 array자료[X] = '바꿀값' 이렇게 하면 된다. 그래서 자료를 바..
좋아요 버튼 만들기 버튼을 누르면 좋아요 개수가 1씩 증가하는 기능을 만들어보자. 자주 바뀔 것 같은 html 내용은 state로 저장했다가 데인터바인딩하면 된다. 좋아요 개수를 state로 만들면 될 것이다. function App(){ let [title, setTitle] = useState( ['자바스크립트 동작원리', '리액트를 쓰는 이유', '프로그래밍 공부법'] ); let [like] = useState(0); return ( { title[0] } 👍{like} ) } onClick 사용법 이제 버튼을 누르면 like라는 state를 1 증가시키면 원하던 기능 완성인데 그 전에 알아야할게 하나 있다. 어떤 html을 클릭시 원하는 코드 실행하는 법을 알아보자. 일반 html 파일에서는 이..
HTML은 로 작성한다. 안녕 이런 식의 태그들을 열고 닫은 후 내부에 글을 넣고 그림을 넣을 수 있다. 태그들은 종류와 용도가 매우 많이 존재한다. 글을 작성하고 싶다면 글을 넣을 때 쓰는 태그를 사용하고, 버튼을 넣고 싶으면 버튼을 넣을 때 쓰는 태그를 사용하면 된다. 기본 태그 목록 글 본문 글 제목 링크 버튼 리스트 리스트 1. 태그를 열었으면 으로 닫아야한다. 닫지 않아도 되는 태그도 몇개 존재한다. 이런거다. 2. 특정 태그는 안에 href=" ", src=" " 이런 속성을 집어넣어서 추가정보를 기입가능하다. href는 클릭시 이동할 링크를 기입가능하다. src는 파일 경로를 기입가능하다. 3. 용도에 맞는 태그를 사용해야한다. 용도에 맞는 태그를 쓰는게 강제되는 사항은 아니다. 버튼 이렇게..
HTML은 어디다가 쓰는 언어인가? 웹 페이지를 만들고 디자인하고 싶을 때 사용한다. 세상에 존재하는 모든 웹페이지는 html 언어로 작성한다. HTML은 Hypertext Markup Language의 약자인데 Markup Language에 주목하면 된다. 마크업 언어는 "자료의 구조를 표현하기 위한 언어"이다. 웹페이지에 우리가 글 넣고 그림넣고 박스넣고 버튼넣고 ... 등등 자료들을 입력한다. 그 자료들이 어디에 배치되는지 그런 것들을 기록하기 위해 존재하는 언어가 바로 HTML이라고 보면 된다. 아무튼 우리가 HTML 언어로 글 넣고 그림넣고 하면 웹페이지가 되는 것이다. HTML 파일 기본 템플릿 HTML 문서는 .html로 끝나도록 저장하면 되며 모든 HTML 문서는 위의 코드를 가지고 있어야..
