초보 개발자

우리가 만든 컴포넌트는 재사용성이 뛰어나다. 하나를 만들어두고 props만 다르게 두고 주면 되기 때문이다. Btn이라는 컴포넌트를 만들고 App에서 만들어주었다 Btn()이렇게 하면 안되고 이렇게 해주어야 한다. 또한 여기에서 속성을 넣어서 보낼 수도 있다. 함수의 인자와 매개변수 관계라고 생각하면 될 것 같다. 그리고 저 속성에 넣는다고 적용이 되지 않는다 저 속성(props)를 보내고 컴포넌트에 보내고 컴포넌트안에서 그 속성을 사용해야만 적용이 된다. banana라는 속성과 onChange라는 속성을 보내고 Btn컴포넌트에서 banana는 버튼이름으로 onChange는 onClick의 실행함수로 넣어주었다. (실제 컴포넌트의 태그안에 안 넣어 주면 말짱도루묵!!) 여기서 우리가 banana에는 버튼..

어떤 컴포넌트가 실행이 될 때 랜더라는 함수보다 더 일찍 실행이 되면서 그 컴포넌트를 초기화 시켜주는 코드는 constructer를 짜고 그 안에다가 적어준다. (초기화를 담당!!) state의 개념이 나오는데 조금 헷갈린다. props와 같이 쓰이는데 대략 내가 느낀 점은(틀릴 가능성 농후) state는 class의 기본 설정값이다. 초기화를 통해서 값을 설정해주고 하위 컴포넌트들의( import를 통해 가져온 ) {this.props.title}과 같이 설정 해둔 곳에 이렇게 적어둠으로써 상호작용을 할 수 있다. 상위의 클래스의 state값을 props를 통해 가져오고 그 가져온 값을 가공하여 return 하는 느낌이다 class Nav extends Component { render() { cons..

앞서 클래스를 통해 사용자 지정태그를 만들어 보았다. 근데 항상 똑같은 결과만 도출 한다면 재사용성이 떨어지지는 않을까?? 그래서 props를 통해 내용을 바꿀 수 있다.!! class Subject extends Component { render() { return ( {this.props.title} ); } } 이렇게 Subject 클래스에서 h1의 내용안에 {this.props.title} 이라고 적어준다면 App 클래스 안에서 사용자 지정태그를 적어줄때 이렇게 적어준다면 h1 안에 title의 내용이 들어간다!! 근데 app.js에 여러 class를 선언해두면 보기 불편하고 또 다른 파일에서 필요할 땐 못쓰니까 불편하다.. 따라서 !! 따로 폴더를 만들어서 그 곳에 정리를 해두면 된다. src ..